styling

css/main.css

@@ -25,12 +25,12 @@ body{
     position: absolute;
     top:0;
     right:0;
-    width:420px;
+    width:440px;
     margin-top:53px;
     padding:20px 20px;
     overflow: auto;
     height: 100%;
-    /*background: rgba(255,255,255,0.5);*/
+    background:rgba(10,10,10,0.1);
 }
 #controls>a{
     float:right;
@@ -65,7 +65,7 @@ body{
 }
 
 a, a:hover, a:visited, a:focus{
-    color:#8cbaed;
+    color:#ec008b;
 }
 
 a.btn:visited, a.btn:focus{
@@ -113,6 +113,10 @@ input.form-control {
     float:right;
 }
 
+.form-control, .select2-search input[type=text] {
+    height: 35px;
+}
+
 .floatRight{
     float:right;
 }
@@ -276,3 +280,7 @@ svg{
     width: 100%;
     height: 100%;
 }
+
+.hexVal{
+    border-width:4px;
+}

css/nav.css

@@ -2,7 +2,7 @@
     margin-bottom:0;
     z-index: 5;
     border-radius: 0;
-    background: rgba(68,68,68,0.8);
+    background: rgba(10,10,10,0.8);
 }
 
 .navbar-inverse .navbar-nav>li>a{
@@ -21,7 +21,7 @@
     background-color: #bbb;
 }
 .navbar-inverse .navbar-nav>.open>.dropdown-menu{
-    background-color: #646464;
+    background-color: #3b3b3b;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;

index.html

@@ -422,14 +422,21 @@
                     Colored Material
                 </label>
                 <div id="coloredMaterialOptions" class="indent">
-                    <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="form-control" type="text"><br/>
-                    <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="form-control" type="text"><br/>
+                    <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
+                    <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                 </div>
                 <label class="radio">
                     <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                     Face Normals Material
                 </label>
             </div><br/>
+            Edges:
+            <div class="indent">
+                <label class="checkbox" for="edgesVisible">
+                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+                    Edges Visible
+                </label>
+            </div>
         </div>
     </div>
 </div>

js/beam.js

@@ -48,6 +48,10 @@ Beam.prototype.getVector = function(fromNode){
     return this.vertices[1].clone().sub(this.vertices[0]);
 };
 
+Beam.prototype.setVisibility = function(state){
+    this.object3D.visible = state;
+};
+
 
 
 //dynamic solve

js/controls.js

@@ -79,9 +79,16 @@ function initControls(globals){
 
     setHexInput("#color1", globals.color1, function(val){
         globals.color1 = val;
+        globals.model.setMeshMaterial();
     });
     setHexInput("#color2", globals.color2, function(val){
         globals.color2 = val;
+        globals.model.setMeshMaterial();
+    });
+
+    setCheckbox("#edgesVisible", globals.edgesVisible, function(val){
+        globals.edgesVisible = val;
+        globals.model.updateEdgeVisibility();
     });
 
     function setButtonGroup(id, callback){
@@ -132,9 +139,13 @@ function initControls(globals){
 
     function setHexInput(id, val, callback){
         var $input = $(id);
+        $input.css({"border-color": "#" + val});
         $input.change(function(){
             var val = $input.val();
+            var validHex  = /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(val);
+            if (!validHex) return;
             $input.val(val);
+            $input.css({"border-color": "#" + val});
             callback(val);
         });
         $input.val(val);

js/globals.js

@@ -11,6 +11,7 @@ function initGlobals(){
         colorMode: "color",
         color1: "ec008b",
         color2: "ffffff",
+        edgesVisible: true,
 
         //flags
         fixedHasChanged: false,

js/model.js

@@ -21,6 +21,12 @@ function initModel(globals){
         if (object3D) object3D.material = material;
     }
 
+    function updateEdgeVisibility(){
+        for (var i=0;i<edges.length;i++){
+            edges[i].setVisibility(globals.edgesVisible);
+        }
+    }
+
     var geometry = new THREE.Geometry();
     geometry.dynamic = true;
     var object3D = new THREE.Mesh(geometry, material);
@@ -101,7 +107,7 @@ function initModel(globals){
                 console.log("static");
             }
             geometry.verticesNeedUpdate = true;
-            geometry.computeFaceNormals();
+            // geometry.computeFaceNormals();
             geometry.computeFlatVertexNormals();
         });
     }
@@ -217,6 +223,7 @@ function initModel(globals){
         getCreases: getCreases,
         buildModel: buildModel,
         getObjectsToIntersect: getObjectsToIntersect,
-        setMeshMaterial: setMeshMaterial
+        setMeshMaterial: setMeshMaterial,
+        updateEdgeVisibility: updateEdgeVisibility
     }
 }
\ No newline at end of file

js/node.js

@@ -19,6 +19,7 @@ function Node(position, index){
 
     this.object3D = new THREE.Mesh(nodeGeo, nodeMaterial);
     this.object3D._myNode = this;
+    this.object3D.visible = false;
 
     this.beams = [];
     this.creases = [];

js/threeView.js

@@ -23,7 +23,7 @@ function initThreeView(globals) {
         renderer.setSize(window.innerWidth, window.innerHeight);
         container.append(renderer.domElement);
 
-        scene.background = new THREE.Color(0xe6e6e6);
+        scene.background = new THREE.Color(0xffffff);//new THREE.Color(0xe6e6e6);
         scene.add(wrapper);
         scene.add(patternWrapper);
         patternWrapper.visible = false;