Merge branch 'develop'

xyz-tools · Dec 27, 2020 · bb80e28 · bb80e28
2 parents 79bd95f + b6418a5
commit bb80e28
Show file tree

Hide file tree

Showing 19 changed files with 178,366 additions and 61,847 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.2
+- add buildVolume param to render the build volume
+
 ## 2.1.1
 - add startLayer, endLayer and singleLayerMode
 

diff --git a/README.md b/README.md
@@ -4,11 +4,26 @@ A simple [G-code](https://en.wikipedia.org/wiki/G-code) parser & viewer with 3D
 ## 3D WebGL + pan/zoom/rotate controls
 ![Demo Animation](../assets/benchy.gif?raw=true)
 
+## New in v2.2: build volume
+The build volume will be rendered if the `buildVolume` parameter is passed. It has the following type: 
+```
+buildVolume: { 
+  x: number; 
+  y: number; 
+  z: number
+}
+```
+
+example:
+
+<img src='https://user-images.githubusercontent.com/461650/103179898-c014a100-4890-11eb-8a25-13415c26f0f4.png' width=200>
+
 ## Demo
 Go try the [interactive demo](https://gcode-preview.web.app/).
 
 
 ## Installation
+[![npm version](http://img.shields.io/npm/v/gcode-preview.svg?style=flat)](https://npmjs.org/package/gcode-preview "View this project on npm") 
 
  `npm install gcode-preview`
 
@@ -36,7 +51,7 @@ or
 ```
 
 ### Vue.js integration
-There's also a [Vue.js example](https://github.com/remcoder/gcode-preview-vue-demo) that has a [Vue component](https://github.com/remcoder/gcode-preview-vue-demo/blob/master/src/components/GCodePreview.vue) to wrap the library.
+There's a [Vue.js example](https://github.com/remcoder/gcode-preview/tree/develop/vue-demo) that has a [Vue component](https://github.com/remcoder/gcode-preview/blob/develop/vue-demo/src/components/GCodePreview.vue) to wrap the library.
 
 ## Known issues
 ### Preview doesn't render in Brave
@@ -58,3 +73,6 @@ A big thanks to these sponsors for their contributions.
 [<img width=42 src="http://logo.q42.com/q42-logo.svg" /> Q42 ](http://q42.com)
 
 [<img width=42 src="https://www.duet3d.com/image/catalog/logo/50_blue_wifi.png"> Duet3D](https://www.duet3d.com/)
+
+## Changelog
+jump to the [CHANGELOG](CHANGELOG.md)
diff --git a/demo/benchy.gcode b/demo/benchy.gcode
diff --git a/demo/demo.js b/demo/demo.js
@@ -10,6 +10,10 @@ const layerCount = document.getElementById('layer-count');
 const fileName = document.getElementById('file-name');
 const fileSize = document.getElementById('file-size');
 const snapshot = document.getElementById('snapshot');
+const buildVolumeX = document.getElementById('buildVolumeX');
+const buildVolumeY = document.getElementById('buildVolumeY');
+const buildVolumeZ = document.getElementById('buildVolumeZ');
+const drawBuildVolume = document.getElementById('drawBuildVolume');
 // const lineWidth = document.getElementById('line-width');
 
 function initDemo() {
@@ -19,6 +23,9 @@ function initDemo() {
     topLayerColor: new THREE.Color(`hsl(180, 50%, 50%)`).getHex(),
     lastSegmentColor: new THREE.Color(`hsl(270, 50%, 50%)`).getHex(),
     // lineWidth: 4
+    buildVolume: {x: 150, y: 150, z: 150},
+    initialCameraPosition: [0,400,450],
+    // debug: true
   }));
 
   preview.renderExtrusion = true;
@@ -68,6 +75,42 @@ function initDemo() {
     preview.render();
   });
 
+  function updateBuildVolume (evt) {
+    const x = parseInt(buildVolumeX.value, 10);
+    const y = parseInt(buildVolumeY.value, 10);
+    const z = parseInt(buildVolumeZ.value, 10);
+    const draw = drawBuildVolume.checked;
+
+    if (draw && !isNaN(x) && !isNaN(y)) {
+      preview.buildVolume = { 
+        x: x, 
+        y: y,
+        z: z
+      }
+    }
+    else {
+      preview.buildVolume = null;
+    }
+
+    preview.render();
+
+    if (draw) {
+      buildVolumeX.removeAttribute('disabled');
+      buildVolumeY.removeAttribute('disabled');
+      buildVolumeZ.removeAttribute('disabled');
+    }
+    else {
+      buildVolumeX.setAttribute('disabled', 'disabled');
+      buildVolumeY.setAttribute('disabled', 'disabled');
+      buildVolumeZ.setAttribute('disabled', 'disabled');
+    }
+  }
+
+  buildVolumeX.addEventListener('input', updateBuildVolume);
+  buildVolumeY.addEventListener('input', updateBuildVolume);
+  buildVolumeZ.addEventListener('input', updateBuildVolume);
+  drawBuildVolume.addEventListener('input', updateBuildVolume);
+
   // lineWidth.addEventListener('change', function() {
   //   preview.lineWidth = parseInt(lineWidth.value,10);
   //   preview.render();

diff --git a/demo/dist/gcode-preview.js b/demo/dist/gcode-preview.js
diff --git a/demo/index.html b/demo/index.html
@@ -70,7 +70,24 @@ <h2 class="description">Preview a 3d print from a gcode file</h2>
           <label for="highlight">Highlight top layer</label
           ><input type="checkbox" id="highlight" />
         </div>
-
+      </section>
+      <section>
+        <div  class="controls">
+          <label for="drawBuildVolume">Draw build volume</label
+          ><input type="checkbox" id="drawBuildVolume" checked />
+        </div>
+        <div class="controls">
+          <label for="buildVolumeX">Build volume (x)</label
+          ><input type="number" id="buildVolumeX" step=10 value=150 />
+        </div>
+        <div  class="controls">
+          <label for="buildVolumeY">Build volume (y)</label
+          ><input type="number" id="buildVolumeY" step=10 value=150 />
+        </div>
+        <div  class="controls">
+          <label for="buildVolumeZ">Build volume (z)</label
+          ><input type="number" id="buildVolumeZ" step=10 value=150 />
+        </div>
 
       </section>
       <section>