new option: change mesh and slice colors

lautr3k · Mar 21, 2016 · 4bb9e13052fda1c2f15c71120d2b776c76800e4e · 4bb9e13
1 parent 0907ae6
commit 4bb9e13052fda1c2f15c71120d2b776c76800e4e
Unified Split

Showing with 74 additions and 2 deletions.

+21 −0 index.html

+53 −2 js/main.js
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="vendor/jquery-ui/jquery-ui.min.css" />
         <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
         <link rel="stylesheet" type="text/css" href="vendor/bootstrap-slider/css/bootstrap-slider.min.css" />
+        <link rel="stylesheet" type="text/css" href="vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" />
         <link rel="stylesheet" type="text/css" href="css/main.css" />
     </head>
     <body>
@@ -226,6 +227,25 @@ <h3 class="panel-title">Screen</h3>
                     </div>
                 </div><!-- #screen -->
 
+                <div id="colors" 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="#colors-body">
+                            <span class="glyphicon glyphicon-menu-down"></span>
+                        </button>
+                        <h3 class="panel-title">Colors</h3>
+                    </div>
+                    <div id="colors-body" class="panel-body collapse in">
+                        <div class="form-group">
+                            <label for="mesh-color">Mesh</label>
+                            <input type="text" id="mesh-color" class="form-control input-sm" placeholder="#555555" />
+                        </div>
+                        <div class="form-group">
+                            <label for="slice-color">Slice</label>
+                            <input type="text" id="slice-color" class="form-control input-sm" placeholder="#550000" />
+                        </div>
+                    </div>
+                </div><!-- #colors -->
+
             </div><!-- #sidebar -->
 
             <div id="main">
@@ -251,6 +271,7 @@ <h3 class="panel-title">Screen</h3>
         <script src="vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
         <script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
         <script src="vendor/bootstrap-slider/bootstrap-slider.min.js" type="text/javascript"></script>
+        <script src="vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
         <script src="vendor/lodash.min.js" type="text/javascript"></script>
         <script src="vendor/three.min.js" type="text/javascript"></script>
         <script src="vendor/earcut.js" type="text/javascript"></script>

diff --git a/js/main.js b/js/main.js
@@ -59,6 +59,14 @@ var settings = new SLAcer.Settings({
             position : 5
         }
     },
+    colors: {
+        mesh : '#555555',
+        slice: '#88ee11',
+        panel: {
+            collapsed: false,
+            position : 6
+        }
+    },
     viewer3d: {
         color: 0xffffff
     }
@@ -95,6 +103,9 @@ function removeSlices() {
     viewer2dWin && (viewer2dWin.document.body.style.backgroundImage = 'none');
 }
 
+function hexToDec(hex) {
+    return parseInt(hex.toString().replace('#', ''), 16);
+}
 
 function getSlice(layerNumber) {
     // remove old shapes
@@ -125,6 +136,7 @@ function getSlice(layerNumber) {
     // slices
     slices = [];
     var slice, shape;
+    var sliceColor = hexToDec(settings.get('colors.slice'));
 
     // add new shapes
     for (var i = 0, il = shapes.length; i < il; i++) {
@@ -136,8 +148,9 @@ function getSlice(layerNumber) {
         viewer2d.addObject(slice);
         slices.push(slice);
 
-        shape.position.z = zPosition;
+        shape.material.color.setHex(sliceColor);
         shape.material.depthTest = false;
+        shape.position.z = zPosition;
         viewer3d.scene.add(shape);
     }
 
@@ -584,6 +597,44 @@ $('#screen input[type=radio]').on('change', updateScreenSettings);
 $('#screen input').on('input', updateScreenSettings);
 updateScreenUI();
 
+// Colors
+var $colorsBody = initPanel('colors');
+var $meshColor  = $colorsBody.find('#mesh-color');
+var $sliceColor = $colorsBody.find('#slice-color');
+
+function updateColorsUI() {
+    var colors = settings.get('colors');
+
+    $meshColor.val(colors.mesh);
+    $sliceColor.val(colors.slice);
+}
+
+updateColorsUI();
+$meshColor.colorpicker({ format: 'hex' });
+$sliceColor.colorpicker({ format: 'hex' });
+
+$meshColor.colorpicker().on('changeColor.colorpicker', function(e) {
+    if (slicer.mesh && slicer.mesh.material) {
+        var hexString  = e.color.toHex();
+        var hexInteger = hexToDec(hexString);
+        settings.set('colors.mesh', hexString);
+        slicer.mesh.material.color.setHex(hexInteger);
+        viewer3d.render();
+    }
+});
+
+$sliceColor.colorpicker().on('changeColor.colorpicker', function(e) {
+    if (shapes && shapes.length) {
+        var hexString  = e.color.toHex();
+        var hexInteger = hexToDec(hexString);
+        settings.set('colors.slice', hexString);
+        for (var i = 0, il = shapes.length; i < il; i++) {
+            shapes[i].material.color.setHex(hexInteger);
+        }
+        viewer3d.render();
+    }
+});
+
 // UI resize
 function resizeUI() {
     var width  = $main.width();
@@ -613,7 +664,7 @@ loader.onGeometry = function(geometry) {
 
         // load new mesh in slicer
         slicer.loadMesh(new SLAcer.Mesh(geometry, new THREE.MeshPhongMaterial({
-            color: settings.get('mesh.color')
+            color: hexToDec(settings.get('colors.mesh'))
         })));
 
         // add new mesh and render view