split sidebar item styles

lautr3k · Mar 18, 2016 · d2437cd2a1f8722176f6d9671979232c7a8e2224 · d2437cd
1 parent 5877461
commit d2437cd2a1f8722176f6d9671979232c7a8e2224
Unified Split

Showing with 107 additions and 27 deletions.

+6 −2 css/main.css

+30 −3 index.html

+67 −22 js/main.js

+4 −0 js/slacer/mesh.js
diff --git a/css/main.css b/css/main.css
@@ -47,10 +47,14 @@
 }
 
 #sidebar label,
-#sidebar .info-label,
+#sidebar .info-label {
+    width: 60%;
+    float: left;
+}
+
 #sidebar .info-value,
 #sidebar .form-control {
-    width: 50%;
+    width: 40%;
     float: left;
 }
 

diff --git a/index.html b/index.html
@@ -62,6 +62,18 @@ <h3 class="panel-title">Mesh</h3>
                             <span class="info-label">Faces</span>
                             <span class="info-value" id="mesh-faces">0</span>
                         </div>
+                        <div class="info">
+                            <span class="info-label">Width <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+                            <span class="info-value" id="mesh-size-x">0</span>
+                        </div>
+                        <div class="info">
+                            <span class="info-label">Depth <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+                            <span class="info-value" id="mesh-size-y">0</span>
+                        </div>
+                        <div class="info">
+                            <span class="info-label">Height <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+                            <span class="info-value" id="mesh-size-z">0</span>
+                        </div>
                         <div class="info">
                             <span class="info-label">Volume <small>(ml)</small></span>
                             <span class="info-value" id="mesh-volume">0</span>
@@ -73,6 +85,21 @@ <h3 class="panel-title">Mesh</h3>
                     </div>
                 </div><!-- #mesh -->
 
+                <div id="slicer" class="panel panel-default">
+                    <div class="panel-heading">
+                        <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#slicer-body">
+                            <span class="glyphicon glyphicon-menu-down"></span>
+                        </button>
+                        <h3 class="panel-title">Slicer</h3>
+                    </div>
+                    <div id="slicer-body" class="panel-body collapse in">
+                        <div class="form-group">
+                            <label for="layers-height">Layers height <small>(μm)</small></label>
+                            <input type="number" id="layers-height" class="form-control input-sm" placeholder="100" min="1" />
+                        </div>
+                    </div>
+                </div><!-- #slicer -->
+
                 <div id="build-volume" class="panel panel-default">
                     <div class="panel-heading">
                         <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#build-volume-body">
@@ -82,15 +109,15 @@ <h3 class="panel-title">Build volume</h3>
                     </div>
                     <div id="build-volume-body" class="panel-body collapse in">
                         <div class="form-group">
-                            <label for="build-volume-x">X</label>
+                            <label for="build-volume-x">X <small>(width)</small></label>
                             <input type="number" id="build-volume-x" class="form-control input-sm" placeholder="100" min="0" />
                         </div>
                         <div class="form-group">
-                            <label for="build-volume-y">Y</label>
+                            <label for="build-volume-y">Y <small>(depth)</small></label>
                             <input type="number" id="build-volume-y" class="form-control input-sm" placeholder="100" min="0" />
                         </div>
                         <div class="form-group">
-                            <label for="build-volume-z">Z</label>
+                            <label for="build-volume-z">Z <small>(height)</small></label>
                             <input type="number" id="build-volume-z" class="form-control input-sm" placeholder="100" min="0" />
                         </div>
                         <div class="form-group">

diff --git a/js/main.js b/js/main.js
@@ -3,29 +3,44 @@
 // -----------------------------------------------------------------------------
 //window.localStorage.clear();
 var settings = new SLAcer.Settings({
+    file: {
+        panel: {
+            collapsed: false,
+            position : 0
+        }
+    },
+    mesh: {
+        color: 0x333333,
+        panel: {
+            collapsed: false,
+            position : 1
+        }
+    },
+    slicer: {
+        layers: {
+            height: 100 // μm
+        },
+        panel: {
+            collapsed: false,
+            position : 2
+        }
+    },
     buildVolume: {
         size     : { x: 100,  y: 100,  z: 100 }, // mm
         unit     : 'mm',                         // mm or in
         color    : 0xcccccc,
         opacity  : 0.1,
         panel    : {
             collapsed: false,
-            position : 2
+            position : 3
         }
     },
     resin: {
         density  : 1.1, // g/cm3
         price    : 50,   // $
         panel    : {
             collapsed: false,
-            position : 3
-        }
-    },
-    mesh: {
-        color: 0x333333,
-        panel: {
-            collapsed: false,
-            position : 1
+            position : 4
         }
     },
     screen: {
@@ -34,13 +49,7 @@ var settings = new SLAcer.Settings({
         diagonal : { size: 22, unit: 'in' },
         panel    : {
             collapsed: false,
-            position : 4
-        }
-    },
-    file: {
-        panel: {
-            collapsed: false,
-            position : 0
+            position : 5
         }
     },
     viewer3d: {
@@ -60,6 +69,15 @@ function errorHandler(error) {
 // -----------------------------------------------------------------------------
 var slicer = new SLAcer.Slicer();
 
+function slice(layerNumber) {
+    // get slice
+    var layerHeight = settings.get('slicer.layers.height') / 1000;
+    var zPosition   = layerNumber * layerHeight;
+    var slice       = slicer.getFaces(zPosition);
+    console.log('layer number:', layerNumber);
+    console.log('z position  :', zPosition);
+}
+
 // -----------------------------------------------------------------------------
 // UI
 // -----------------------------------------------------------------------------
@@ -78,7 +96,7 @@ var viewer3d  = new SLAcer.Viewer3D({
 var $sliderInput = $('#slider input');
 
 $sliderInput.slider({ reversed : true }).on('change', function(e) {
-    console.log('slice:', e.value.newValue);
+    slice(e.value.newValue);
 });
 
 var $sliderElement = $('#slider .slider');
@@ -145,17 +163,39 @@ function parseUnit(value, unit) {
 var $fileBody = initPanel('file');
 
 // Mesh panel
-var $meshBody   = initPanel('mesh');
-var $meshFaces  = $meshBody.find('#mesh-faces');
-var $meshVolume = $meshBody.find('#mesh-volume');
-var $meshWeight = $meshBody.find('#mesh-weight');
+var $meshBody     = initPanel('mesh');
+var $meshFaces    = $meshBody.find('#mesh-faces');
+var $meshVolume   = $meshBody.find('#mesh-volume');
+var $meshWeight   = $meshBody.find('#mesh-weight');
+var $meshSizeX    = $meshBody.find('#mesh-size-x');
+var $meshSizeY    = $meshBody.find('#mesh-size-y');
+var $meshSizeZ    = $meshBody.find('#mesh-size-z');
+var $meshSizeUnit = $meshBody.find('.mesh-size-unit');
 
 function updateMeshInfoUI(mesh) {
+    var size = mesh.getSize();
+    var unit = settings.get('buildVolume.unit');
+
+    $meshSizeUnit.html(unit);
+
+    if (unit == 'in') {
+        size.x = parseUnit(size.x, 'in');
+        size.y = parseUnit(size.y, 'in');
+        size.z = parseUnit(size.z, 'in');
+    }
+
+    $meshSizeX.html(size.x.toFixed(2));
+    $meshSizeY.html(size.y.toFixed(2));
+    $meshSizeZ.html(size.z.toFixed(2));
+
     $meshFaces.html(mesh.geometry.faces.length);
     $meshVolume.html(parseInt(mesh.getVolume() / 1000)); // cm3/ml
     $meshWeight.html(0);
 }
 
+// Slicer panel
+var $slicerBody = initPanel('slicer');
+
 // Build volume panel
 var $buildVolumeBody = initPanel('buildVolume');
 var $buildVolumeX    = $buildVolumeBody.find('#build-volume-x');
@@ -174,6 +214,7 @@ function updateBuildVolumeSettings() {
 
     if (unit != settings.get('buildVolume.diagonal.unit')) {
         var size = settings.get('buildVolume.size');
+
         $buildVolumeX.val(parseUnit(size.x, unit));
         $buildVolumeY.val(parseUnit(size.y, unit));
         $buildVolumeZ.val(parseUnit(size.z, unit));
@@ -187,6 +228,10 @@ function updateBuildVolumeSettings() {
         },
         unit: unit
     });
+
+    if (size) {
+        updateMeshInfoUI(slicer.mesh);
+    }
 }
 
 $('#build-volume-unit-' + settings.get('buildVolume.unit')).prop('checked', true);
@@ -289,7 +334,7 @@ loader.onGeometry = function(geometry) {
         updateMeshInfoUI(slicer.mesh);
 
         // get first slice
-        //slice(0);
+        //slice(1);
     }
     catch(e) {
         errorHandler(e);

diff --git a/js/slacer/mesh.js b/js/slacer/mesh.js
@@ -32,6 +32,10 @@ var SLAcer = SLAcer || {};
 
     // -------------------------------------------------------------------------
 
+    Mesh.prototype.getSize = function() {
+        return this.geometry.boundingBox.size();
+    };
+
     // http://stackoverflow.com/questions/23279521
     Mesh.prototype.getVolume = function(update) {
         if (! update && this.userData.volume !== undefined) {