Merge branch 'develop'

.npmignore

@@ -0,0 +1 @@
+vue-demo/

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 2.1.1
+- add startLayer, endLayer and singleLayerMode
+
 ## 2.1.0
 - remove lineWidth for now
 

demo/demo.js

@@ -1,6 +1,8 @@
 let gcodePreview;
 
-const slider = document.getElementById('layers');
+const startLayer = document.getElementById('start-layer');
+const endLayer = document.getElementById('end-layer');
+const toggleSingleLayerMode = document.getElementById('single-layer-mode');
 const toggleExtrusion = document.getElementById('extrusion');
 const toggleTravel = document.getElementById('travel');
 const toggleHighlight = document.getElementById('highlight');
@@ -22,8 +24,26 @@ function initDemo() {
   preview.renderExtrusion = true;
   preview.renderTravel = false;
 
-  slider.addEventListener('input', function(evt) {
-    preview.limit = +slider.value;
+  startLayer.addEventListener('input', function(evt) {
+    preview.startLayer = +startLayer.value;
+    endLayer.value = preview.endLayer = Math.max(preview.startLayer, preview.endLayer);
+    preview.render();
+  });
+
+  endLayer.addEventListener('input', function(evt) {
+    preview.endLayer = +endLayer.value;
+    startLayer.value = preview.startLayer = Math.min(preview.startLayer, preview.endLayer);
+    preview.render();
+  });
+
+  toggleSingleLayerMode.addEventListener('click', function() {
+    preview.singleLayerMode = toggleSingleLayerMode.checked;
+    if (preview.singleLayerMode) {
+      startLayer.setAttribute('disabled', 'disabled');
+    } 
+    else {
+      startLayer.removeAttribute('disabled');
+    }
     preview.render();
   });
 
@@ -94,8 +114,10 @@ function initDemo() {
 }
 
 function updateUI() {
-  slider.setAttribute('max', gcodePreview.layers.length - 1);
-  slider.value = gcodePreview.layers.length - 1;
+  startLayer.setAttribute('max', gcodePreview.layers.length);
+  endLayer.setAttribute('max', gcodePreview.layers.length);
+  endLayer.value = gcodePreview.layers.length;
+
   layerCount.innerText =
     gcodePreview.layers && gcodePreview.layers.length + ' layers';
 
@@ -147,20 +169,28 @@ function _handleGCode(filename, gcode) {
 
 function startLoadingProgressive(gcode) {
   let c = 0;
+  startLayer.setAttribute('disabled', 'disabled');
+  endLayer.setAttribute('disabled', 'disabled');
   function loadProgressive() {
     const start = c * chunkSize;
     const end = (c + 1) * chunkSize;
     const chunk = lines.slice(start, end);
-    gcodePreview.processGCode(chunk);
-    updateUI();
+
     c++;
     if (c < chunks) {
-      window.__loadTimer__ = setTimeout(loadProgressive, 25);
+      window.__loadTimer__ = requestAnimationFrame(loadProgressive)
+    }
+    else {
+      startLayer.removeAttribute('disabled');
+      endLayer.removeAttribute('disabled');
     }
+    gcodePreview.processGCode(chunk);
+    updateUI();
   }
+
   const lines = gcode.split('\n');
   console.log('lines', lines.length);
-  const chunkSize = 100;
+  const chunkSize = 1000;
   console.log('chunk size', chunkSize);
   const chunks = lines.length / chunkSize;
   console.log('chunks', chunks);

demo/index.html

@@ -39,13 +39,25 @@ <h2 class="description">Preview a 3d print from a gcode file</h2>
       </section>
       <section>
         <div class="controls">
-          <label>Layers</label>&nbsp;<input
+          <label>End layer</label>&nbsp;<input
             type="range"
-            min="0"
+            min="1"
             value="0"
-            id="layers"
+            id="end-layer"
           />
         </div>
+        <div class="controls">
+          <label>Start layer</label>&nbsp;<input
+            type="range"
+            min="1"
+            value="0"
+            id="start-layer"
+          />
+        </div>
+        <div class="controls">
+          <label for="single-layer-mode">Single layer mode</label
+          ><input type="checkbox" id="single-layer-mode" />
+        </div>
         <div class="controls">
           <label for="extrusion">Extrusion</label
           ><input type="checkbox" id="extrusion" />

dist/webgl-preview.d.ts

@@ -12,15 +12,15 @@ declare type Point = {
 };
 declare type WebGLPreviewOptions = {
     canvas?: HTMLCanvasElement;
-    targetId: string;
-    limit?: number;
+    endLayer?: number;
+    startLayer?: number;
+    targetId?: string;
     topLayerColor?: number;
     lastSegmentColor?: number;
-    lineWidth: number;
+    lineWidth?: number;
 };
 export declare class WebGLPreview {
     parser: Parser;
-    limit?: number;
     targetId: string;
     scene: THREE.Scene;
     camera: THREE.PerspectiveCamera;
@@ -35,9 +35,14 @@ export declare class WebGLPreview {
     canvas: HTMLCanvasElement;
     renderExtrusion: boolean;
     renderTravel: boolean;
-    lineWidth: number | null;
+    lineWidth?: number;
+    startLayer?: number;
+    endLayer?: number;
+    singleLayerMode: boolean;
     constructor(opts: WebGLPreviewOptions);
     get layers(): import("./gcode-parser").Layer[];
+    get maxLayerIndex(): number;
+    get minLayerIndex(): number;
     animate(): void;
     processGCode(gcode: string | string[]): void;
     render(): void;