diff --git a/js/main.js b/js/main.js
index 4d4aa5f92247416492f8fdc8bc9ddb32339cd5ec..b0c8ad765e8ee42d037c3cdbf7dcbe8b26b83dfa 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,9 +17,10 @@ $(function(){
var fillGeometryView = new FillGeometryView({model: fillGeometry, three:threeModel});
- lattice = new Lattice();
+ var lattice = new Lattice();
+ var latticeView = new LatticeView({model:lattice, three:threeModel, fillGeometry:fillGeometry});
- var highlightTargets = [fillGeometryView];
+ var highlightTargets = [latticeView];
var threeView = new ThreeView({model:threeModel, highlightTargets:highlightTargets});
diff --git a/js/menus/importView.js b/js/menus/importView.js
index a1b023cd80ef34d13dd4f2497a093825e4280130..81b0e29d9c272dd16da8258486ac526cbb3b2055 100644
--- a/js/menus/importView.js
+++ b/js/menus/importView.js
@@ -11,7 +11,8 @@ ImportView = Backbone.View.extend({
"change #uploadMesh": "uploadMesh",
"click .selectMesh": "selectMesh",
"fileselect .btn-file :file": "readDataURL",
- "click .stlRotate": "rotate"
+ "click .stlRotate": "rotate",
+ "change .dimension": "scale"
},
initialize: function(){
@@ -60,16 +61,32 @@ ImportView = Backbone.View.extend({
this.model.set("geometry", e.content);
},
-// scale: function(e){
-// this.model.set("scale", $(e.target).slider('getValue'));
-// },
-
makeDimensionString: function(){
var bounds = this.model.get("boundingBoxHelper").box;
return (bounds.max.x - bounds.min.x).toFixed(1) + " x " +
(bounds.max.y - bounds.min.y).toFixed(1) + " x " + (bounds.max.z - bounds.min.z).toFixed(1);
},
+ getScale: function(){
+ var scale = this.model.get("scale");
+ var dimensions = {};
+ dimensions.xScale = scale[0];
+ dimensions.yScale = scale[1];
+ dimensions.zScale = scale[2];
+ dimensions.dimensions = this.makeDimensionString();
+ return dimensions;
+ },
+
+ scale: function(e){
+
+ this.model.scale([this.getDimScale($(".xScale").val()), this.getDimScale($(".yScale").val()), this.getDimScale($(".zScale").val())]);
+ },
+
+ getDimScale: function(val){
+ if (val == "") return null;
+ return parseFloat(val);
+ },
+
rotate: function(e){
e.preventDefault();
var axis = $(e.target).data("axis");
@@ -77,11 +94,9 @@ ImportView = Backbone.View.extend({
},
render: function(){
- this.$el.html(this.template(_.extend(this.model.attributes, {dimensions:this.makeDimensionString()})));
+ this.$el.html(this.template(_.extend(this.model.attributes, this.getScale())));
},
-
-
template: _.template(
'<div class="row demo-row">\
<div class="col-xs-3">\
@@ -104,17 +119,28 @@ ImportView = Backbone.View.extend({
</div> <!-- /.col-xs-3 -->\
<div class="col-xs-9">\
<div>Geometry: <%= filename %><br/>\
- Dimensions: <%= dimensions %><br/>\
- Units: </div></br>\
- <div class="col-xs-4">\
- <a href="#" data-axis="z" class="stlRotate btn btn-block btn-lg btn-default">Rotate X</a>\
- </div>\
- <div class="col-xs-4">\
- <a href="#" data-axis="y" class="stlRotate btn btn-block btn-lg btn-default">Rotate Y</a>\
- </div>\
- <div class="col-xs-4">\
- <a href="#" data-axis="x" class="stlRotate btn btn-block btn-lg btn-default">Rotate Z</a>\
+ <div>Dimensions: <%= dimensions %></div>\
+ <div class="col-xs-2">\
+ <input type="text" value placeholder="<%= xScale %>" class="xScale dimension form-control"></input>\
+ </div> \
+ <div class="col-xs-2">\
+ <input type="text" value placeholder="<%= yScale %>" class="yScale dimension form-control"></input>\
</div>\
+ <div class="col-xs-2">\
+ <input type="text" value placeholder="<%= zScale %>" class="zScale dimension form-control"></input>\
+ </div><br/><br/>\
+ Units: </div></br>\
</div>\
</div>')
-});
\ No newline at end of file
+});
+
+
+// <div class="col-xs-4">\
+// <a href="#" data-axis="z" class="stlRotate btn btn-block btn-lg btn-default">Rotate X</a>\
+// </div>\
+// <div class="col-xs-4">\
+// <a href="#" data-axis="y" class="stlRotate btn btn-block btn-lg btn-default">Rotate Y</a>\
+// </div>\
+// <div class="col-xs-4">\
+// <a href="#" data-axis="x" class="stlRotate btn btn-block btn-lg btn-default">Rotate Z</a>\
+// </div>\
\ No newline at end of file
diff --git a/js/models/fillGeometry.js b/js/models/fillGeometry.js
index f2bb73d734ea1c13a1d5aadf89103d087d2910f5..85b86453aad244d12cd7b8ff4fc166fa0de297b2 100644
--- a/js/models/fillGeometry.js
+++ b/js/models/fillGeometry.js
@@ -6,11 +6,11 @@
FillGeometry = Backbone.Model.extend({
defaults: {
- material: new THREE.MeshLambertMaterial(
+ material: new THREE.MeshBasicMaterial(
{color:0xf25536,
shading: THREE.FlatShading,
transparent:true,
- opacity:0.5}),
+ opacity:0.2}),
geometry: new THREE.BoxGeometry(100, 100, 100),
filename: "Cube",
orientation: [0,0,0],
@@ -55,21 +55,13 @@ FillGeometry = Backbone.Model.extend({
this.trigger("change:boundingBoxHelper");
},
- rotate: function(axis){
- var orientation = this.get("orientation").slice(0);//make a copy so that set triggers change event
- var mesh = this.get("mesh");
- var piOver2 = Math.PI/2;
- if (axis == "x"){
- mesh.rotateX(piOver2);
- orientation[0] += piOver2;
- } else if (axis == "y"){
- mesh.rotateX(piOver2);
- orientation[1] += piOver2;
- } else {
- mesh.rotateX(piOver2);
- orientation[2] += piOver2;
+ scale: function(scale){
+ var currentScale = this.get("scale");
+ for (var i=0;i<currentScale.length;i++){
+ if (!scale[i]) scale[i] = currentScale[i];
}
- this.set("orientation", orientation);
+ this.get("mesh").scale.set(scale[0], scale[1], scale[2]);
+ this.set("scale", scale);
}
});
diff --git a/js/models/lattice.js b/js/models/lattice.js
index 51f96a828bf04ebcf18372f00f4289e8e3c7b6c9..311c65e393029065541e74536cee78a8dd36c009 100644
--- a/js/models/lattice.js
+++ b/js/models/lattice.js
@@ -8,11 +8,15 @@ Lattice = Backbone.Model.extend({
defaults: {
scale: 1.0,
translation: new THREE.Vector3(0,0,0),
- rotation: new THREE.Vector3(0,0,0)
+ rotation: new THREE.Vector3(0,0,0),
+ type: "cube"
},
initialize: function(){
+
+
+
//bind events
}
diff --git a/js/models/threeModel.js b/js/models/threeModel.js
index 08d734c202cc2ada27b4a40fe08cfb0c63a50c68..91ee142a5ef3af267fc37d6e25a11b98604880b8 100644
--- a/js/models/threeModel.js
+++ b/js/models/threeModel.js
@@ -8,6 +8,7 @@ function ThreeModel(){
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({antialias:false});
+ var objects = [];
initialize();
@@ -58,11 +59,13 @@ function ThreeModel(){
}
function sceneAdd(object){
- scene.add(object)
+ scene.add(object);
+ objects.push(object);
}
function sceneRemove(object){
scene.remove(object);
+ objects.remove(object);
}
function render(){
@@ -86,6 +89,7 @@ function ThreeModel(){
sceneRemove:sceneRemove,
sceneAdd:sceneAdd,
domElement:renderer.domElement,
- camera:camera
+ camera:camera,
+ objects:objects
}
}
\ No newline at end of file
diff --git a/js/threeViews/latticeView.js b/js/threeViews/latticeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c26bdfe4e32c33fdf0127cdd074e0bbbc23b336
--- /dev/null
+++ b/js/threeViews/latticeView.js
@@ -0,0 +1,68 @@
+/**
+ * Created by aghassaei on 1/16/15.
+ */
+
+LatticeView = Backbone.View.extend({
+
+ events: {
+ },
+
+ el: "#threeContainer",
+
+ controls: null,
+
+ initialize: function(options){
+
+ this.three = options.three;
+ this.fillGeometry = options.fillGeometry;
+
+
+ //bind events
+ this.listenTo(this.model, "change:bounds", this.updateBuildPlanes());
+
+ this.buildPlanes();
+ this.render();
+
+ },
+
+ updateBuildPlanes: function(){
+ },
+
+ buildPlanes: function(){
+ var xyPlaneGeo = new THREE.Geometry();
+ var xzPlaneGeo = new THREE.Geometry();
+ var yzPlaneGeo = new THREE.Geometry();
+
+ var size=50, step = 5;
+ for (var i=-size;i<=size;i+=step){
+ xyPlaneGeo.vertices.push(new THREE.Vector3(-size, -size, i));
+ xyPlaneGeo.vertices.push(new THREE.Vector3(size, -size, i));
+ xyPlaneGeo.vertices.push(new THREE.Vector3(i, -size, -size));
+ xyPlaneGeo.vertices.push(new THREE.Vector3(i, -size, size));
+
+ xzPlaneGeo.vertices.push(new THREE.Vector3(-size, -size, i));
+ xzPlaneGeo.vertices.push(new THREE.Vector3(-size, size, i));
+ xzPlaneGeo.vertices.push(new THREE.Vector3(-size, i, -size));
+ xzPlaneGeo.vertices.push(new THREE.Vector3(-size, i, size));
+
+ yzPlaneGeo.vertices.push(new THREE.Vector3(-size, i, -size));
+ yzPlaneGeo.vertices.push(new THREE.Vector3(size, i, -size));
+ yzPlaneGeo.vertices.push(new THREE.Vector3(i, -size, -size));
+ yzPlaneGeo.vertices.push(new THREE.Vector3(i, size, -size));
+ }
+
+ this.addPlane(xyPlaneGeo);
+// this.addPlane(yzPlaneGeo);
+// this.addPlane(xzPlaneGeo);
+
+ },
+
+ addPlane: function(planeGeo){
+ var plane = new THREE.Line(planeGeo, new THREE.LineBasicMaterial({color:0x000000, opacity:0.3}), THREE.LinePieces);
+ this.three.sceneAdd(plane);
+ },
+
+ render: function(){
+ this.three.render();
+ }
+});
\ No newline at end of file
diff --git a/js/threeViews/meshHandle.js b/js/threeViews/meshHandle.js
index 3fc98f6181168aff12a3ce858d0b32de50086e1c..8fa49ce7549f2276f380e2b5a1eb049143f7b69a 100644
--- a/js/threeViews/meshHandle.js
+++ b/js/threeViews/meshHandle.js
@@ -2,12 +2,36 @@
* Created by aghassaei on 1/18/15.
*/
-//a draggable vector that moves a mesh face
-
-function MeshHandle(){
+//a draggable vector that moves a mesh face, singleton for now
+function MeshHandle(three){
+ //init invisible arrow and add to scene
+ this.arrow = new THREE.ArrowHelper(new THREE.Vector3(0,0,1), new THREE.Vector3(0,0,0), 10, 0x000000);
+// this.arrow.visibility = false;
+// three.sceneAdd(this.arrow);
}
-MeshHandle.prototype.destroy() = function{
+MeshHandle.prototype.updatePosition = function(origin, normal){
+ this.arrow.position.set(origin);
+ this.arrow.setDirection(normal);
+};
+
+MeshHandle.prototype.setForFaces = function(faces, vertices){
+ if (!faces || faces.length<1) console.warn("no faces passed in to mesh handle");
+
+ var mutuallyExclusiveVertices = [faces[1].a, faces[1].b, faces[1].c];
+ _.each([faces[0].a, faces[0].b, faces[0].c], function(vertex){
+ if (mutuallyExclusiveVertices.indexOf(vertex) == -1) mutuallyExclusiveVertices.push(vertex);
+ else mutuallyExclusiveVertices.remove(vertex);
+ });
+ if (mutuallyExclusiveVertices.length != 2) console.warn("not a square face");
+ var origin = numeric.mul(numeric.add(vertices[mutuallyExclusiveVertices[0]], vertices[mutuallyExclusiveVertices[1]]), 0.5);
+
+ this.arrow.position.set(origin);
+ this.arrow.setDirection(faces[0].normal);
+ this.arrow.visibility = true;
+};
-}
\ No newline at end of file
+MeshHandle.prototype.hide = function(){
+ this.arrow.visibility = false;
+};
\ No newline at end of file
diff --git a/js/threeViews/pushPullMeshView.js b/js/threeViews/pushPullMeshView.js
index 6fa3936117c6dbc0420599c215587bfc91ea1fc3..e27ecaaf73c17dd6c57be94c9ced4bfc35b8f707 100644
--- a/js/threeViews/pushPullMeshView.js
+++ b/js/threeViews/pushPullMeshView.js
@@ -2,17 +2,20 @@
* Created by aghassaei on 1/17/15.
*/
-//this is a parent class for other threeJS VCs that allows push and pull scale and orientation changes in the threeJS scene
+//this is a parent class for other threeJS VCs that allows push and pull scale changes in the threeJS scene
PushPullMeshView = Backbone.View.extend({
+ el: "#threeContainer",
events: {
},
boundsBox: null,
boxHelper: null,
- currentHighlightedFace: null,
+ currentHighlightedFaces:[],
+ shouldReceiveHighlight: true,
+ highlightPlane: null,
initialize: function(options){
@@ -22,20 +25,16 @@ PushPullMeshView = Backbone.View.extend({
this.listenTo(this.model, "change:bounds change:scale change:orientation", this.updateBounds);
this.drawBounds();
-
+// this.createHighlightPlane();
},
drawBounds: function(){
- var materials = [
- new THREE.MeshLambertMaterial({color:0xffffff, shading:THREE.FlatShading, transparent:true, opacity:0.0, vertexColors:THREE.FaceColors}),
- new THREE.MeshLambertMaterial({color:0xffffff, shading:THREE.FlatShading, transparent:true, opacity:1.0, vertexColors:THREE.FaceColors})
- ];
- this.boundsBox = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100));//, new THREE.MeshFaceMaterial(materials)
+ this.boundsBox = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshLambertMaterial({color:0x0000ff, shading:THREE.FlatShading, transparent:true, opacity:0.0, vertexColors:THREE.FaceColors}));
this.boxHelper = new THREE.BoxHelper(this.boundsBox);
this.boxHelper.material.color.set(this.defaultColor);
this.three.sceneAdd(this.boxHelper);
- this.three.sceneAdd(this.boundsBox);
+// this.three.sceneAdd(this.boundsBox);
this.updateBounds();
},
@@ -52,23 +51,46 @@ PushPullMeshView = Backbone.View.extend({
this.render();
},
+// createHighlightPlane: function(){
+// var squareGeometry = new THREE.Geometry();
+// squareGeometry.vertices.push(new THREE.Vector3());
+// squareGeometry.vertices.push(new THREE.Vector3());
+// squareGeometry.vertices.push(new THREE.Vector3());
+// squareGeometry.vertices.push(new THREE.Vector3());
+// squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
+// squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
+// var squareMaterial = new THREE.MeshBasicMaterial({color:0xffffff, shading:THREE.FlatShading, transparent:true, opacity:0.0, vertexColors:THREE.FaceColors});
+// this.highlightPlane = new THREE.Mesh(squareGeometry, squareMaterial);
+// this.three.sceneAdd(this.highlightPlane);
+// },
+
checkHighlight: function(intersections){
- if (this.currentHighlightedFace) {
- this.currentHighlightedFace.color.setHex(this.defaultColor);
- this.model.get("mesh").geometry.colorsNeedUpdate = true;
- this.render();
- }
if (intersections.length>0){
var face = intersections[0].face;
- face.color.setHex(0xffffff);
- this.currentHighlightedFace = face;
- intersections[0].object.geometry.colorsNeedUpdate = true;
- this.render();
- } else {
+ if (this.currentHighlightedFaces.indexOf(face) != -1) return;//stay the same
+ this.setHighlightColor(this.currentHighlightedFaces, 0x0000ff);
- this.currentHighlightedFace = null;
+ var faceIndex = intersections[0].object.geometry.faces.indexOf(face);
+ var face2Index = faceIndex-1;
+ if (faceIndex%2==0) face2Index = faceIndex+1;
+ this.currentHighlightedFaces = [face, intersections[0].object.geometry.faces[face2Index]];
+ this.setHighlightColor(this.currentHighlightedFaces, 0xffffff);
+
+ this.render();
+ } else if (this.currentHighlightedFaces.length > 0){
+ this.setHighlightColor(this.currentHighlightedFaces, 0x0000ff);
+ this.currentHighlightedFaces = [];
+ this.render();
}
+ },
+ setHighlightColor: function(faces, color){
+ _.each(faces, function(face){
+ face.color.setHex(color);
+ });
+ this.boundsBox.geometry.colorsNeedUpdate = true;
+// this.boundsBox.geometry.__dirtyColors = true
+// this.boundsBox.geometry.dynamic = true
}
});
\ No newline at end of file
diff --git a/js/threeViews/threeView.js b/js/threeViews/threeView.js
index 57327f4a091ef40d087357494b75f10dbc53f989..036194b683f36d868e2ed0a1a4f4a34eb2312851 100644
--- a/js/threeViews/threeView.js
+++ b/js/threeViews/threeView.js
@@ -7,12 +7,15 @@ ThreeView = Backbone.View.extend({
events: {
"mousemove": "mouseMoved",
"mousedown": "mouseDown",
- "mouseup": "mouseUp"
+ "mouseup": "mouseUp",
},
mouseIsDown: false,//store state of mouse click
mouseProjection: new THREE.Raycaster(),
+ projectionTargets: null,
highlightTargets: null,
+ meshHandle: null,
+ cubeGeometry: new THREE.BoxGeometry(5,5,5),
el: "#threeContainer",
@@ -21,11 +24,18 @@ ThreeView = Backbone.View.extend({
initialize: function(options){
this.highlightTargets = options.highlightTargets;
+ this.projectionTargets = [];
+ var self = this;
+ _.each(this.highlightTargets, function(target){
+ if (target.boundsBox) self.projectionTargets.push(target.boundsBox);
+ });
_.bindAll(this, "animate", "mouseMoved");
this.controls = new THREE.OrbitControls(this.model.camera, this.$el.get(0));
this.controls.addEventListener('change', this.model.render);
+ this.meshHandle = new MeshHandle(this.model);
+
this.$el.append(this.model.domElement);
this.animate();
@@ -35,26 +45,44 @@ ThreeView = Backbone.View.extend({
this.mouseIsDown = false;
},
- mouseDown: function(){
+ mouseDown: function(e){
this.mouseIsDown = true;
+
+ var vector = new THREE.Vector2(2*(e.pageX-this.$el.offset().left)/this.$el.width()-1, 1-2*(e.pageY-this.$el.offset().top)/this.$el.height());
+ var camera = this.model.camera;
+ this.mouseProjection.setFromCamera(vector, camera);
+ var intersections = this.mouseProjection.intersectObjects(this.model.objects);
+
+ console.log(intersections);
+
+ if (intersections.length>1){
+ var voxel = new THREE.Mesh(this.cubeGeometry);
+ voxel.position.copy(intersections[1].point);
+ voxel.position.divideScalar(5).floor().multiplyScalar(5).addScalar(2.5);
+ this.model.sceneAdd(voxel);
+ this.model.render();
+ }
},
mouseMoved: function(e){
if (this.mouseIsDown) return;//in the middle of a drag event
- var vector = new THREE.Vector2(2*e.pageX/window.innerWidth-1, 1-2*e.pageY/window.innerHeight);
+ var vector = new THREE.Vector2(2*(e.pageX-this.$el.offset().left)/this.$el.width()-1, 1-2*(e.pageY-this.$el.offset().top)/this.$el.height());
var camera = this.model.camera;
this.mouseProjection.setFromCamera(vector, camera);
- var targets = [];
- _.each(this.highlightTargets, function(target){
- console.log(target.boundsBox);
- if (target.boundsBox) target.push(target.boundsBox);
- });
- var intersections = this.mouseProjection.intersectObjects(targets);
- _.each(this.highlightTargets, function(target){
- target.checkHighlight(intersections);
- });
+ var intersections = this.mouseProjection.intersectObjects(this.model.objects);
+
+
+// _.each(this.highlightTargets, function(target){
+// target.checkHighlight(intersections);
+// });
},
+// getTopObject: function(targets, intersections, index){
+// if (intersections.length<index) return null;
+// if (intersections.)
+// this.getTopObject(targets, intersections, index+1);
+// }
+
animate: function(){
requestAnimationFrame(this.animate);
this.controls.update();
diff --git a/main.html b/main.html
index 1eace19426bebe4791e90c28dc4d9aee051c5e18..c4dad7a51279e8be9ed4909c796846bc843bc626 100644
--- a/main.html
+++ b/main.html
@@ -45,10 +45,12 @@
<script src="js/models/lattice.js"></script>
<!--views-->
+ <script src="js/threeViews/meshHandle.js"></script>
<script src="js/threeViews/threeView.js"></script>
<script src="js/threeViews/pushPullMeshView.js"></script>
<script src="js/menus/importView.js"></script>
<script src="js/threeViews/fillGeometryView.js"></script>
+ <script src="js/threeViews/latticeView.js"></script>
<script src="js/main.js"></script>
@@ -113,367 +115,6 @@
</div>
</div>
</div>
-<div id="controls1Menu" class="row navMenu">
- <div class="col-xs-5">
- <h3 class="demo-panel-title">Progress bars & Sliders</h3>
- <div class="progress">
- <div class="progress-bar" style="width: 45%;"></div>
- </div>
- <br>
- <div class="progress">
- <div class="progress-bar" style="width: 40%;"></div>
- <div class="progress-bar progress-bar-warning" style="width: 10%;"></div>
- <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
- <div class="progress-bar progress-bar-success" style="width: 10%;"></div>
- <div class="progress-bar progress-bar-info" style="width: 10%;"></div>
- </div>
- <br>
- <div id="slider1" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-segment" style="margin-left: 25%;"></div><div class="ui-slider-segment" style="margin-left: 25%;"></div><div class="ui-slider-segment" style="margin-left: 25%;"></div>
- <div class="ui-slider-segment"></div>
- <div class="ui-slider-segment"></div>
- <div class="ui-slider-segment"></div>
- <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 50%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a></div>
- </div> <!-- /sliders -->
-
- <div class="col-xs-6 col-xs-offset-1">
- <h3 class="demo-panel-title">Navigation</h3>
- <div class="row demo-navigation">
- <div class="col-xs-6">
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn btn-primary" href="#fakelink"><span class="fui-time"></span></a>
- <a class="btn btn-primary" href="#fakelink"><span class="fui-photo"></span></a>
- <a class="btn btn-primary active" href="#fakelink"><span class="fui-heart"></span></a>
- <a class="btn btn-primary" href="#fakelink"><span class="fui-eye"></span></a>
- </div>
- </div> <!-- /toolbar -->
- </div>
- <div class="col-xs-6 demo-pager">
- <ul class="pager">
- <li class="previous">
- <a href="#fakelink">
- <span class="fui-arrow-left"></span>
- <span>All messages</span>
- </a>
- </li>
- <li class="next">
- <a href="#fakelink">
- <span class="fui-arrow-right"></span>
- </a>
- </li>
- </ul> <!-- /pager -->
- </div>
- </div> <!-- /demo-navigation -->
-
- <div class="pagination">
- <ul>
- <li class="previous"><a href="#fakelink" class="fui-arrow-left"></a></li>
- <li class="active"><a href="#fakelink">1</a></li>
- <li><a href="#fakelink">2</a></li>
- <li><a href="#fakelink">3</a></li>
- <li><a href="#fakelink">4</a></li>
- <li><a href="#fakelink">5</a></li>
- <li><a href="#fakelink">6</a></li>
- <li><a href="#fakelink">7</a></li>
- <li><a href="#fakelink">8</a></li>
- <li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
- </ul>
- </div> <!-- /pagination -->
- </div> <!-- /navigation -->
-</div>
-<div id="controls2Menu" class="row navMenu">
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Checkboxes</h3>
- <label class="checkbox" for="checkbox1">
- <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" class="custom-checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Unchecked
- </label>
- <label class="checkbox" for="checkbox2">
- <input type="checkbox" checked="checked" value="" id="checkbox2" data-toggle="checkbox" class="custom-checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Checked
- </label>
- <label class="checkbox" for="checkbox3">
- <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled="" class="custom-checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Disabled unchecked
- </label>
- <label class="checkbox" for="checkbox4">
- <input type="checkbox" checked="checked" value="" id="checkbox4" data-toggle="checkbox" disabled="" class="custom-checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Disabled checked
- </label>
- </div> <!-- /checkboxes col-xs-3 -->
-
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Radio Buttons</h3>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="radio" class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Radio is off
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" data-toggle="radio" checked="" class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Radio is on
- </label>
-
- <label class="radio">
- <input type="radio" name="optionsRadiosDisabled" id="optionsRadios3" value="option2" data-toggle="radio" disabled="" class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Disabled radio is off
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadiosDisabled" id="optionsRadios4" value="option2" data-toggle="radio" checked="" disabled="" class="custom-radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
- Disabled radio is on
- </label>
- </div> <!-- /radios col-xs-3 -->
-
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Switches</h3>
-
- <table width="100%">
- <tbody><tr>
- <td width="50%" class="pbm">
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-animate bootstrap-switch-id-custom-switch-01"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" checked="" data-toggle="switch" id="custom-switch-01"></div></div>
- </td>
- <td class="pbm">
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-animate bootstrap-switch-id-custom-switch-02"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" data-toggle="switch" id="custom-switch-02"></div></div>
- </td>
- </tr>
- <tr>
- <td class="pbm">
- <div class="bootstrap-switch-square">
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-animate bootstrap-switch-id-custom-switch-03"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary"><span class="fui-check"></span></span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default"><span class="fui-cross"></span></span><input type="checkbox" checked="" data-toggle="switch" id="custom-switch-03" data-on-text="<span class='fui-check'></span>" data-off-text="<span class='fui-cross'></span>"></div></div>
- </div>
- </td>
- <td class="pbm">
- <div class="bootstrap-switch-square">
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-animate bootstrap-switch-id-custom-switch-04"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" data-toggle="switch" id="custom-switch-04"></div></div>
- </div>
- </td>
- </tr>
- <tr>
- <td>
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-animate bootstrap-switch-disabled bootstrap-switch-id-custom-switch-5"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" checked="" disabled="" data-toggle="switch" id="custom-switch-5"></div></div>
- </td>
- <td>
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-animate bootstrap-switch-disabled bootstrap-switch-id-custom-switch-6"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" checked="" disabled="" data-toggle="switch" id="custom-switch-6"></div></div>
- </td>
- </tr>
- </tbody></table>
- </div> <!-- /.col-xs-3 -->
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Share</h3>
- <div class="share mrl">
- <ul>
- <li>
- <label class="share-label" for="share-toggle2">Facebook</label>
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-animate"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" data-toggle="switch"></div></div>
- </li>
- <li>
- <label class="share-label" for="share-toggle4">Twitter</label>
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-animate"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" checked="" data-toggle="switch"></div></div>
- </li>
- <li>
- <label class="share-label" for="share-toggle6">Pinterest</label>
- <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-animate"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span><label class="bootstrap-switch-label"> </label><span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span><input type="checkbox" data-toggle="switch"></div></div>
- </li>
- </ul>
- <a href="#" class="btn btn-primary btn-block btn-large">Share</a>
- </div> <!-- /share -->
- </div><!-- /.col-xs-3 -->
- </div>
-<div id="controls3Menu" class="row navMenu demo-row">
- <div class="demo-icons">
- <div class="demo-content">
- <span class="fui-info-circle"></span>
- <span class="fui-alert-circle"></span>
- <span class="fui-question-circle"></span>
- <span class="fui-check-circle"></span>
- <span class="fui-cross-circle"></span>
- <span class="fui-plus-circle"></span>
- <span class="fui-window"></span>
- <span class="fui-windows"></span>
- <span class="fui-upload"></span>
- <span class="fui-arrow-right"></span>
- <span class="fui-arrow-left"></span>
- <span class="fui-loop"></span>
- <span class="fui-cmd"></span>
- <span class="fui-mic"></span>
- <span class="fui-export"></span>
- <span class="fui-heart"></span>
- <span class="fui-location"></span>
- <span class="fui-plus"></span>
- <span class="fui-check"></span>
- <span class="fui-cross"></span>
- <span class="fui-list"></span>
- <span class="fui-new"></span>
- <span class="fui-video"></span>
- <span class="fui-photo"></span>
- <span class="fui-time"></span>
- <span class="fui-eye"></span>
- <span class="fui-chat"></span>
- <span class="fui-home"></span>
- <span class="fui-search"></span>
- <span class="fui-user"></span>
- <span class="fui-mail"></span>
- <span class="fui-lock"></span>
- <span class="fui-power"></span>
- <span class="fui-star"></span>
- <span class="fui-calendar"></span>
- <span class="fui-gear"></span>
- <span class="fui-bookmark"></span>
- <span class="fui-exit"></span>
- <span class="fui-trash"></span>
- <span class="fui-folder"></span>
- <span class="fui-bubble"></span>
- <span class="fui-calendar-solid"></span>
- <span class="fui-star-2"></span>
- <span class="fui-credit-card"></span>
- <span class="fui-clip"></span>
- <span class="fui-link"></span>
- <span class="fui-pause"></span>
- <span class="fui-play"></span>
- <span class="fui-volume"></span>
- <span class="fui-mute"></span>
- <span class="fui-resize"></span>
- <span class="fui-tag"></span>
- <span class="fui-document"></span>
- <span class="fui-image"></span>
- <span class="fui-triangle-up"></span>
- <span class="fui-triangle-up-small"></span>
- <span class="fui-triangle-right-large"></span>
- <span class="fui-triangle-left-large"></span>
- <span class="fui-triangle-down"></span>
- <span class="fui-triangle-down-small"></span>
- <span class="fui-radio-unchecked"></span>
- <span class="fui-radio-checked"></span>
- <span class="fui-checkbox-unchecked"></span>
- <span class="fui-checkbox-checked"></span>
- <span class="fui-list-thumbnailed"></span>
- <span class="fui-list-small-thumbnails"></span>
- <span class="fui-list-numbered"></span>
- <span class="fui-list-large-thumbnails"></span>
- <span class="fui-list-columned"></span>
- <span class="fui-list-bulleted"></span>
- </div><!-- /.demo-content -->
- </div>
- <div class="demo-icons">
- <div class="demo-content">
- <span class="fui-facebook"></span>
- <span class="fui-youtube"></span>
- <span class="fui-vimeo"></span>
- <span class="fui-twitter"></span>
- <span class="fui-stumbleupon"></span>
- <span class="fui-spotify"></span>
- <span class="fui-skype"></span>
- <span class="fui-pinterest"></span>
- <span class="fui-path"></span>
- <span class="fui-linkedin"></span>
- <span class="fui-google-plus"></span>
- <span class="fui-dribbble"></span>
- <span class="fui-behance"></span>
- <span class="fui-yelp"></span>
- <span class="fui-wordpress"></span>
- <span class="fui-windows-8"></span>
- <span class="fui-vine"></span>
- <span class="fui-tumblr"></span>
- <span class="fui-paypal"></span>
- <span class="fui-lastfm"></span>
- <span class="fui-instagram"></span>
- <span class="fui-html5"></span>
- <span class="fui-github"></span>
- <span class="fui-foursquare"></span>
- <span class="fui-dropbox"></span>
- <span class="fui-android"></span>
- <span class="fui-apple"></span>
- </div><!-- /.demo-content -->
- </div>
- </div>
-<div id="controls4Menu" class="row navMenu">
- <div class="row demo-row">
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-primary">Primary Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-warning">Warning Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-default">Default Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-danger">Danger Button</a>
- </div>
- </div>
- <div class="row demo-row">
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-success">Success Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-inverse">Inverse Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-info">Info Button</a>
- </div>
- <div class="col-xs-3">
- <a href="#fakelink" class="btn btn-block btn-lg btn-default disabled">Disabled Button</a>
- </div>
- </div>
-</div>
-<div id="controls5Menu" class="row demo-row navMenu">
- <div class="row">
- <div class="col-xs-3">
- <div class="form-group">
- <input type="text" value="" placeholder="Inactive" class="form-control">
- </div>
- </div>
- <div class="col-xs-3">
- <div class="form-group has-error">
- <input type="text" value="Error" class="form-control">
- </div>
- </div>
- <div class="col-xs-3">
- <div class="form-group has-success">
- <input type="text" value="Success" class="form-control">
- <span class="input-icon fui-check-inverted"></span>
- </div>
- </div>
- <div class="col-xs-3">
- <div class="form-group">
- <input type="text" value="Disabled" disabled="disabled" class="form-control">
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Dropdown</h3>
-
- <div class="btn-group">
- <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Default <span class="caret"></span></button>
- <ul role="menu" class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </div><!-- /btn-group -->
- </div> <!-- /.col-xs-3 -->
- <div class="col-xs-3">
- <h3 class="demo-panel-title">Select</h3>
- <div class="select2-container form-control select select-primary" id="s2id_autogen1"><a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-2">X-Men</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2"></div><select class="form-control select select-primary select2-offscreen" data-toggle="select" tabindex="-1" title="">
- <option value="0">Choose hero</option>
- <option value="1">Spider Man</option>
- <option value="2">Wolverine</option>
- <option value="3">Captain America</option>
- <option value="4" selected="">X-Men</option>
- <option value="5">Crocodile</option>
- </select>
- </div> <!-- /.col-xs-3 -->
- <div class="col-xs-6">
- <h3 class="demo-panel-title">Tags input</h3>
- <div class="tagsinput-primary">
- <input name="tagsinput" class="tagsinput" data-role="tagsinput" value="School, Teacher, Colleague" style="display: none;"><div class="bootstrap-tagsinput"><span class="tag label label-info">School<span data-role="remove"></span></span> <span class="tag label label-info"> Teacher<span data-role="remove"></span></span> <span class="tag label label-info"> Colleague<span data-role="remove"></span></span> <input type="text" placeholder="" style="width: 3em !important;"></div>
- </div>
- </div> <!-- /.col-xs-6 -->
- </div>
-</div>
-
<div id="threeContainer"></div>