auto slice done!

lautr3k · 28b432b7bc5fb6894decdfed228b6bbbe68ff6ca · lautr3k committed Mar 20, 2016 · Mar 20, 2016 · 28b432b
1 parent b9e7aad
commit 28b432b7bc5fb6894decdfed228b6bbbe68ff6ca
Unified Split

Showing with 92 additions and 8 deletions.

+18 −1 index.html

+74 −7 js/main.js
diff --git a/index.html b/index.html
@@ -35,7 +35,10 @@
 
                 <div class="form-group">
                     <button id="open-viewer-2d" class="btn btn-primary" type="button">
-                        2D viewer
+                        <span class="glyphicon glyphicon-picture"></span> 2D viewer
+                    </button>
+                    <button id="slice-button" class="btn btn-success" type="button">
+                        <span class="glyphicon glyphicon-align-center"></span> Slice
                     </button>
                 </div>
 
@@ -103,10 +106,24 @@ <h3 class="panel-title">Mesh</h3>
                         <h3 class="panel-title">Slicer</h3>
                     </div>
                     <div id="slicer-body" class="panel-body collapse in">
+                        <div class="info">
+                            <span class="info-label">Layers <small>(current / total)</small></span>
+                            <span class="info-value">
+                                <span id="slicer-layer-value">0</span> / <span id="slicer-layers-value">0</span>
+                            </span>
+                        </div>
                         <div class="form-group">
                             <label for="slicer-layers-height">Layers height <small>(μm)</small></label>
                             <input type="number" id="slicer-layers-height" class="form-control input-sm" placeholder="100" min="1" />
                         </div>
+                        <div class="form-group">
+                            <label for="slicer-light-on">Light on <small>(ms)</small></label>
+                            <input type="number" id="slicer-light-on" class="form-control input-sm" placeholder="1000" min="1" />
+                        </div>
+                        <div class="form-group">
+                            <label for="slicer-light-off">Light off <small>(ms)</small></label>
+                            <input type="number" id="slicer-light-off" class="form-control input-sm" placeholder="500" min="1" />
+                        </div>
                     </div>
                 </div><!-- #slicer -->
 
diff --git a/js/main.js b/js/main.js
@@ -20,6 +20,10 @@ var settings = new SLAcer.Settings({
         layers: {
             height: 100 // μm
         },
+        light: {
+            on : 1000,
+            off: 500
+        },
         panel: {
             collapsed: false,
             position : 2
@@ -89,11 +93,14 @@ function removeSlices() {
 }
 
 
-function slice(layerNumber) {
+function getSlice(layerNumber) {
     // remove old shapes
     removeSlices();
     removeShapes();
 
+    // ...
+    $slicerLayerValue.html(layerNumber);
+
     if (layerNumber < 1) {
         viewer2d.render();
         viewer3d.render();
@@ -190,7 +197,7 @@ $openViewer2D.click(function(e) {
             viewer2dWin = null;
         })
         .load(function(e) {
-            slice($sliderInput.slider('getValue'));
+            getSlice($sliderInput.slider('getValue'));
         });
     }
 
@@ -202,7 +209,7 @@ $openViewer2D.click(function(e) {
 var $sliderInput = $('#slider input');
 
 $sliderInput.slider({ reversed : true }).on('change', function(e) {
-    slice(e.value.newValue);
+    getSlice(e.value.newValue);
 });
 
 var $sliderElement  = $('#slider .slider');
@@ -214,6 +221,7 @@ function updateSliderUI() {
 
     $sliderInput.slider('setAttribute', 'max', layersNumber);
     $sliderMaxValue.html(layersNumber);
+    $slicerLayersValue.html(layersNumber);
 }
 
 // Sidebar
@@ -319,17 +327,76 @@ function updateMeshInfoUI() {
 // Slicer panel
 var $slicerBody        = initPanel('slicer');
 var $slicerLayerHeight = $slicerBody.find('#slicer-layers-height');
+var $slicerLayersValue = $slicerBody.find('#slicer-layers-value');
+var $slicerLayerValue  = $slicerBody.find('#slicer-layer-value');
+var $slicerLightOff    = $slicerBody.find('#slicer-light-off');
+var $slicerLightOn     = $slicerBody.find('#slicer-light-on');
+var $sliceButton       = $sidebar.find('#slice-button');
 
 function updateSlicerUI() {
-    var layers = settings.get('slicer.layers');
-    $slicerLayerHeight.val(layers.height);
+    var slicer = settings.get('slicer');
+    $slicerLayerHeight.val(slicer.layers.height);
+    $slicerLightOff.val(slicer.light.off);
+    $slicerLightOn.val(slicer.light.on);
 }
 
 function updateSlicerSettings() {
     settings.set('slicer.layers.height', $slicerLayerHeight.val());
+    settings.set('slicer.light.off', $slicerLightOff.val());
+    settings.set('slicer.light.on', $slicerLightOn.val());
     updateSliderUI();
 }
 
+var sliceInterval;
+var expectedSliceInterval;
+var currentSliceNumber;
+var slicesNumber;
+
+function slice() {
+    currentSliceNumber++;
+
+    if (currentSliceNumber > slicesNumber) {
+        return endSlicing();
+    }
+
+    getSlice(currentSliceNumber);
+    $sliderInput.slider('setValue', currentSliceNumber);
+
+    var time = Date.now();
+    var diff = time - expectedSliceInterval;
+
+    viewer2dWin && setTimeout(function() {
+        viewer2dWin.document.body.style.backgroundImage = 'none';
+    }, settings.get('slicer.light.on'));
+
+    expectedSliceInterval += sliceInterval;
+    setTimeout(slice, Math.max(0, sliceInterval - diff));
+}
+
+function endSlicing() {
+    viewer2dWin && (viewer2dWin.document.body.style.backgroundImage = 'none');
+    $sidebar.find('input, button').prop('disabled', false);
+    $sliderInput.slider('enable');
+}
+
+function startSlicing() {
+    var times             = settings.get('slicer.light');
+    sliceInterval         = parseInt(times.on) + parseInt(times.off);
+    expectedSliceInterval = Date.now() + sliceInterval;
+    slicesNumber          = parseInt($slicerLayersValue.html());
+    currentSliceNumber    = 0;
+
+    slicesNumber && slice();
+}
+
+$sliceButton.on('click', function(e) {
+    $sidebar.find('input, button').prop('disabled', true);
+    $('.panel-heading button').prop('disabled', false);
+    $openViewer2D.prop('disabled', false);
+    $sliderInput.slider('disable');
+    startSlicing();
+});
+
 $('#slicer input').on('input', updateSlicerSettings);
 updateSlicerUI();
 
@@ -384,7 +451,7 @@ function updateBuildVolumeSettings() {
     size && updateMeshInfoUI();
 
     updateBuildVolumeSizeStep();
-    slice($sliderInput.slider('getValue'));
+    getSlice($sliderInput.slider('getValue'));
 }
 
 $('#build-volume-unit-' + settings.get('buildVolume.unit')).prop('checked', true);
@@ -498,7 +565,7 @@ loader.onGeometry = function(geometry) {
         updateMeshInfoUI();
 
         // get first slice
-        //slice(1);
+        //getSlice(1);
     }
     catch(e) {
         errorHandler(e);