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

styling

parent 22063272
......@@ -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;
}
......@@ -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;
......
......@@ -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>
......
......@@ -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
......
......@@ -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);
......
......@@ -11,6 +11,7 @@ function initGlobals(){
colorMode: "color",
color1: "ec008b",
color2: "ffffff",
edgesVisible: true,
//flags
fixedHasChanged: false,
......
......@@ -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
......@@ -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 = [];
......
......@@ -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;
......
Markdown is supported
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