Commit 25345a48 authored by amandaghassaei's avatar amandaghassaei
Browse files

styling

parent 22063272
...@@ -25,12 +25,12 @@ body{ ...@@ -25,12 +25,12 @@ body{
position: absolute; position: absolute;
top:0; top:0;
right:0; right:0;
width:420px; width:440px;
margin-top:53px; margin-top:53px;
padding:20px 20px; padding:20px 20px;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
/*background: rgba(255,255,255,0.5);*/ background:rgba(10,10,10,0.1);
} }
#controls>a{ #controls>a{
float:right; float:right;
...@@ -65,7 +65,7 @@ body{ ...@@ -65,7 +65,7 @@ body{
} }
a, a:hover, a:visited, a:focus{ a, a:hover, a:visited, a:focus{
color:#8cbaed; color:#ec008b;
} }
a.btn:visited, a.btn:focus{ a.btn:visited, a.btn:focus{
...@@ -113,6 +113,10 @@ input.form-control { ...@@ -113,6 +113,10 @@ input.form-control {
float:right; float:right;
} }
.form-control, .select2-search input[type=text] {
height: 35px;
}
.floatRight{ .floatRight{
float:right; float:right;
} }
...@@ -276,3 +280,7 @@ svg{ ...@@ -276,3 +280,7 @@ svg{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.hexVal{
border-width:4px;
}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
margin-bottom:0; margin-bottom:0;
z-index: 5; z-index: 5;
border-radius: 0; border-radius: 0;
background: rgba(68,68,68,0.8); background: rgba(10,10,10,0.8);
} }
.navbar-inverse .navbar-nav>li>a{ .navbar-inverse .navbar-nav>li>a{
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
background-color: #bbb; background-color: #bbb;
} }
.navbar-inverse .navbar-nav>.open>.dropdown-menu{ .navbar-inverse .navbar-nav>.open>.dropdown-menu{
background-color: #646464; background-color: #3b3b3b;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
......
...@@ -422,14 +422,21 @@ ...@@ -422,14 +422,21 @@
Colored Material Colored Material
</label> </label>
<div id="coloredMaterialOptions" class="indent"> <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 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="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> </div>
<label class="radio"> <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> <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 Face Normals Material
</label> </label>
</div><br/> </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> </div>
</div> </div>
......
...@@ -48,6 +48,10 @@ Beam.prototype.getVector = function(fromNode){ ...@@ -48,6 +48,10 @@ Beam.prototype.getVector = function(fromNode){
return this.vertices[1].clone().sub(this.vertices[0]); return this.vertices[1].clone().sub(this.vertices[0]);
}; };
Beam.prototype.setVisibility = function(state){
this.object3D.visible = state;
};
//dynamic solve //dynamic solve
......
...@@ -79,9 +79,16 @@ function initControls(globals){ ...@@ -79,9 +79,16 @@ function initControls(globals){
setHexInput("#color1", globals.color1, function(val){ setHexInput("#color1", globals.color1, function(val){
globals.color1 = val; globals.color1 = val;
globals.model.setMeshMaterial();
}); });
setHexInput("#color2", globals.color2, function(val){ setHexInput("#color2", globals.color2, function(val){
globals.color2 = val; globals.color2 = val;
globals.model.setMeshMaterial();
});
setCheckbox("#edgesVisible", globals.edgesVisible, function(val){
globals.edgesVisible = val;
globals.model.updateEdgeVisibility();
}); });
function setButtonGroup(id, callback){ function setButtonGroup(id, callback){
...@@ -132,9 +139,13 @@ function initControls(globals){ ...@@ -132,9 +139,13 @@ function initControls(globals){
function setHexInput(id, val, callback){ function setHexInput(id, val, callback){
var $input = $(id); var $input = $(id);
$input.css({"border-color": "#" + val});
$input.change(function(){ $input.change(function(){
var val = $input.val(); var val = $input.val();
var validHex = /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(val);
if (!validHex) return;
$input.val(val); $input.val(val);
$input.css({"border-color": "#" + val});
callback(val); callback(val);
}); });
$input.val(val); $input.val(val);
......
...@@ -11,6 +11,7 @@ function initGlobals(){ ...@@ -11,6 +11,7 @@ function initGlobals(){
colorMode: "color", colorMode: "color",
color1: "ec008b", color1: "ec008b",
color2: "ffffff", color2: "ffffff",
edgesVisible: true,
//flags //flags
fixedHasChanged: false, fixedHasChanged: false,
......
...@@ -21,6 +21,12 @@ function initModel(globals){ ...@@ -21,6 +21,12 @@ function initModel(globals){
if (object3D) object3D.material = material; 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(); var geometry = new THREE.Geometry();
geometry.dynamic = true; geometry.dynamic = true;
var object3D = new THREE.Mesh(geometry, material); var object3D = new THREE.Mesh(geometry, material);
...@@ -101,7 +107,7 @@ function initModel(globals){ ...@@ -101,7 +107,7 @@ function initModel(globals){
console.log("static"); console.log("static");
} }
geometry.verticesNeedUpdate = true; geometry.verticesNeedUpdate = true;
geometry.computeFaceNormals(); // geometry.computeFaceNormals();
geometry.computeFlatVertexNormals(); geometry.computeFlatVertexNormals();
}); });
} }
...@@ -217,6 +223,7 @@ function initModel(globals){ ...@@ -217,6 +223,7 @@ function initModel(globals){
getCreases: getCreases, getCreases: getCreases,
buildModel: buildModel, buildModel: buildModel,
getObjectsToIntersect: getObjectsToIntersect, getObjectsToIntersect: getObjectsToIntersect,
setMeshMaterial: setMeshMaterial setMeshMaterial: setMeshMaterial,
updateEdgeVisibility: updateEdgeVisibility
} }
} }
\ No newline at end of file
...@@ -19,6 +19,7 @@ function Node(position, index){ ...@@ -19,6 +19,7 @@ function Node(position, index){
this.object3D = new THREE.Mesh(nodeGeo, nodeMaterial); this.object3D = new THREE.Mesh(nodeGeo, nodeMaterial);
this.object3D._myNode = this; this.object3D._myNode = this;
this.object3D.visible = false;
this.beams = []; this.beams = [];
this.creases = []; this.creases = [];
......
...@@ -23,7 +23,7 @@ function initThreeView(globals) { ...@@ -23,7 +23,7 @@ function initThreeView(globals) {
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
container.append(renderer.domElement); 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(wrapper);
scene.add(patternWrapper); scene.add(patternWrapper);
patternWrapper.visible = false; patternWrapper.visible = false;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment