Initial implementation of slicer detection and parsing of needed info from it. Calculate line width from filament diameter, nozzle size and layer height.

Author: hudbrog

README

@@ -1 +1,5 @@
-gCodeVisualizer - a web-based visual gcode analyzer
+gCodeVisualizer - a web-based visual gcode viewer and analyzer.
+Available online at http://gcode.ws/
+
+If you want to use it locally with chrome - you will need to add "--allow-file-access-from-files" command line parameter,
+which is unsafe (and you should never browse internet with that option "on").

index.html

@@ -176,7 +176,8 @@
                         <label for="moveModelCheckbox"><input type="checkbox" id="moveModelCheckbox" value="3"  onclick="GCODE.ui.processOptions()" checked> Move model to the center of the grid</label>
                         <label for="differentiateColorsCheckbox"><input type="checkbox" id="differentiateColorsCheckbox" value="7"  onclick="GCODE.ui.processOptions()" checked> Show different speeds with different colors</label>
                         <label for="thickExtrusionCheckbox"><input type="checkbox" id="thickExtrusionCheckbox" value="8"  onclick="GCODE.ui.processOptions()"> Emulate extrusion width</label>
-                        <label for="widthModifier">Width modifier: <input type="text" value="2" id="widthModifier" onchange="GCODE.ui.processOptions()"/></label>
+                        <label for="alphaCheckbox"><input type="checkbox" id="alphaCheckbox" value="10"  onclick="GCODE.ui.processOptions()" > Render lines slightly transparent</label>
+                        <!--<label for="widthModifier">Width modifier: <input type="text" value="2" id="widthModifier" onchange="GCODE.ui.processOptions()"/></label>-->
                         <label for="showNextLayer"><input type="checkbox" id="showNextLayer" value="9"  onclick="GCODE.ui.processOptions()" > Show +1 layer</label>
                     </div>
                 </div>
@@ -251,8 +252,9 @@ <h1>gCodeViewer</h1>
                                     <li>Show retracts and restarts</li>
                                     <li>Show print/move/retract speeds</li>
                                     <li>Display only part of layer, animate sequence of layer printing</li>
-                                    <li><b>NEW!!</b> Show two layers simultaneously so you can check overhangs</li>
-                                    <li><b>NEW!!</b> Adjust line width to simulate print more closely</li>
+                                    <li>Show two layers simultaneously so you can check overhangs</li>
+                                    <li>Adjust line width to simulate print more closely</li>
+                                    <li><b>Gcode viewer will try to parse nozzle and filament diameters from gcode, but it may fail to do so. In that case you will need to set it manually in 'Printer Info' tab</b></li>
                                 </ul>
                             </li>
                             <li>Analyze GCode

js/gCodeReader.js

@@ -21,6 +21,7 @@ GCODE.gCodeReader = (function(){
     var layerCnt = 0;
     var layerTotal = 0;
     var speeds = {};
+    var slicer = 'unknown';
     var speedsByLayer = {};
     var gCodeOptions = {
         sortLayers: false,
@@ -88,6 +89,69 @@ GCODE.gCodeReader = (function(){
         }
     };
 
+    var getParamsFromKISSlicer = function(gcode){
+        var nozzle = gcode.match(/extrusion_width_mm\s*=\s*(\d*\.\d+)/m);
+        if(nozzle){
+            gCodeOptions['nozzleDia'] = nozzle[1];
+        }
+        var filament = gcode.match(/fiber_dia_mm\s*=\s*(\d*\.\d+)/m);
+        if(filament){
+            gCodeOptions['filamentDia'] = filament[1];
+        }
+    }
+
+    var getParamsFromSlic3r = function(gcode){
+        var nozzle = gcode.match(/nozzle_diameter\s*=\s*(\d*\.\d+)/m);
+        if(nozzle){
+            gCodeOptions['nozzleDia'] = nozzle[1];
+        }
+        var filament = gcode.match(/filament_diameter\s*=\s*(\d*\.\d+)/m);
+        if(filament){
+            gCodeOptions['filamentDia'] = filament[1];
+        }
+    }
+
+    var getParamsFromSkeinforge =function(gcode){
+
+        var nozzle = gcode.match(/nozzle_diameter\s*=\s*(\d*\.\d+)/m);
+        if(nozzle){
+            gCodeOptions['nozzleDia'] = nozzle[1];
+        }
+        var filament = gcode.match(/Filament_Diameter_(mm)\s*:\s*(\d*\.\d+)/m);
+        if(filament){
+            gCodeOptions['filamentDia'] = filament[1];
+        }
+    }
+
+    var getParamsFromMiracleGrue = function(gcode){
+
+    }
+
+    var getParamsFromCura = function(gcode){
+
+    }
+
+    var detectSlicer = function(gcode){
+
+        if(gcode.match(/Slic3r/)){
+            slicer = 'Slic3r';
+            getParamsFromSlic3r(gcode);
+        }else if(gcode.match(/KISSlicer/)){
+            slicer = 'KISSlicer';
+            getParamsFromKISSlicer(gcode);
+        }else if(gcode.match(/skeinforge/)){
+            slicer = 'skeinforge';
+            getParamsFromSkeinforge(gcode);
+        }else if(gcode.match(/Cura/)){
+            slicer = 'cura';
+            getParamsFromCura(gcode);
+        }else if(gcode.match(/Miracle/)){
+            slicer = 'makerbot';
+            getParamsFromMiracleGrue(gcode);
+        }
+
+    }
+
 
 
 // ***** PUBLIC *******
@@ -97,7 +161,7 @@ GCODE.gCodeReader = (function(){
 //            console.log("loadFile");
             model = [];
             z_heights = [];
-
+            detectSlicer(reader.target.result);
             lines = reader.target.result.split(/\n/);
             reader.target.result = null;
 //            prepareGCode();
@@ -170,6 +234,13 @@ GCODE.gCodeReader = (function(){
                 density = 1.24;
             }
             totalWeight = 3.141*gCodeOptions['filamentDia']/10*gCodeOptions['filamentDia']/10/4*totalFilament/10;
+
+            gCodeOptions['wh'] = parseFloat(gCodeOptions['nozzleDia'])/parseFloat(layerHeight);
+            if(slicer === 'Slic3r'){
+                // slic3r stores actual nozzle diameter, but extrusion is usually slightly thicker, here we compensate for that
+                // kissslicer stores actual extrusion width - so no need for that.
+                gCodeOptions['wh'] = gCodeOptions['wh']*1.1;
+            }
         },
         getLayerFilament: function(z){
             return filamentByLayer[z];

js/renderer.js

@@ -37,7 +37,9 @@ GCODE.renderer = (function(){
         modelCenter: {x: 0, y: 0},
         moveModel: true,
         differentiateColors: true,
-        showNextLayer: false
+        showNextLayer: false,
+        alpha: false,
+        actualWidth: false
     };
 
     var offsetModelX=0, offsetModelY=0;
@@ -46,10 +48,15 @@ GCODE.renderer = (function(){
 
 
     var reRender = function(){
+        var gCodeOpts = GCODE.gCodeReader.getOptions();
         var p1 = ctx.transformedPoint(0,0);
         var p2 = ctx.transformedPoint(canvas.width,canvas.height);
         ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
         drawGrid();
+        if(renderOptions['alpha']){ctx.globalAlpha = 0.6;}
+        else {ctx.globalAlpha = 1;}
+        if(renderOptions['actualWidth']){renderOptions['extrusionWidth'] = gCodeOpts['filamentDia']*gCodeOpts['wh']/zoomFactor;}
+        else {renderOptions['extrusionWidth'] = gCodeOpts['filamentDia']*gCodeOpts['wh']/zoomFactor/2;}
         if(renderOptions['showNextLayer'] && layerNumStore < model.length - 1) {
             drawLayer(layerNumStore+1, 0, GCODE.renderer.getLayerNumSegments(layerNumStore+1), true);
         }
@@ -355,6 +362,7 @@ GCODE.renderer = (function(){
             return model;
         },
         render: function(layerNum, fromProgress, toProgress){
+            var gCodeOpts = GCODE.gCodeReader.getOptions();
             if(!initialized)this.init();
             if(!model){
                 drawGrid();
@@ -364,7 +372,10 @@ GCODE.renderer = (function(){
                     var p2 = ctx.transformedPoint(canvas.width,canvas.height);
                     ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
                     drawGrid();
-//                    ctx.globalAlpha = 0.5;
+                    if(renderOptions['alpha']){ctx.globalAlpha = 0.6;}
+                    else {ctx.globalAlpha = 1;}
+                    if(renderOptions['actualWidth']){renderOptions['extrusionWidth'] = gCodeOpts['filamentDia']*gCodeOpts['wh']/zoomFactor;}
+                    else {renderOptions['extrusionWidth'] = gCodeOpts['filamentDia']*gCodeOpts['wh']/zoomFactor/2;}
                     if(renderOptions['showNextLayer'] && layerNum < model.length - 1) {
                         drawLayer(layerNum+1, 0, this.getLayerNumSegments(layerNum+1), true);
                     }
@@ -399,7 +410,6 @@ GCODE.renderer = (function(){
             offsetModelX = (gridSizeX/2-(mdlInfo.min.x+mdlInfo.modelSize.x/2))*zoomFactor;
             offsetModelY = (mdlInfo.min.y+mdlInfo.modelSize.y/2)*zoomFactor-gridSizeY/2*zoomFactor;
             if(ctx)ctx.translate(offsetModelX, offsetModelY);
-
             this.render(layerNum, 0, model[layerNum].length);
         },
         getZ: function(layerNum){

js/ui.js

@@ -220,6 +220,7 @@ GCODE.ui = (function(){
                 printModelInfo();
                 printLayerInfo(0);
                 chooseAccordion('infoAccordionTab');
+                GCODE.ui.updateOptions();
                 $('#myTab').find('a[href="#tab2d"]').tab('show');
                 break;
             case 'returnLayer':
@@ -347,10 +348,11 @@ GCODE.ui = (function(){
             if(document.getElementById('differentiateColorsCheckbox').checked)GCODE.renderer.setOption({differentiateColors: true});
             else GCODE.renderer.setOption({differentiateColors: false});
 
-            var widthMod = 2;
-            if(Number($('#widthModifier').attr('value'))) {widthMod = Number($('#widthModifier').attr('value'));}
-            if(document.getElementById('thickExtrusionCheckbox').checked)GCODE.renderer.setOption({extrusionWidth: widthMod});
-            else GCODE.renderer.setOption({extrusionWidth: 1});
+            if(document.getElementById('thickExtrusionCheckbox').checked)GCODE.renderer.setOption({actualWidth: true});
+            else GCODE.renderer.setOption({actualWidth: false});
+
+            if(document.getElementById('alphaCheckbox').checked)GCODE.renderer.setOption({alpha: true});
+            else GCODE.renderer.setOption({alpha: false});
 
             if(document.getElementById('showNextLayer').checked)GCODE.renderer.setOption({showNextLayer: true});
             else GCODE.renderer.setOption({showNextLayer: false});
@@ -365,6 +367,13 @@ GCODE.ui = (function(){
 
             if(document.getElementById('plasticABS').checked)GCODE.gCodeReader.setOption({filamentType: "ABS"});
             if(document.getElementById('plasticPLA').checked)GCODE.gCodeReader.setOption({filamentType: "PLA"});
+        },
+
+        updateOptions: function(){
+            var gcodeOptions = GCODE.gCodeReader.getOptions();
+
+            document.getElementById('nozzleDia').value = gcodeOptions['nozzleDia'];
+            document.getElementById('filamentDia').value = gcodeOptions['filamentDia'];
         }
     }
 }());