diff --git a/js/menus/ImportMenuView.js b/js/menus/ImportMenuView.js index c2d46acb32e431ad9abab82c5a45a662ac24852a..70f1e01a5727c0c836150fd899a7bb1c76101eff 100644 --- a/js/menus/ImportMenuView.js +++ b/js/menus/ImportMenuView.js @@ -6,23 +6,73 @@ ImportMenuView = Backbone.View.extend({ el: "#menuContent", + model: new FillGeometry(), events: { + "change #uploadMesh": "_uploadMesh", + "click .selectMesh": "_selectMesh", + "fileselect .btn-file :file": "_readDataURL", + "click #removeFillGeo": "_removeMesh" }, initialize: function(){ - _.bindAll(this, "render"); + _.bindAll(this, "render", "_onMeshLoad"); + this.listenTo(this.model, "change", this.render); + + }, + + _selectMesh: function(e){//select mesh from dropdown list + e.preventDefault(); + var filename = $(e.target).data("file"); + this._loadMeshFromURL('data/' + filename); + this.model.set("filename", filename); + }, + + _uploadMesh: function(e){//select a mesh to upload + var input = $(e.target), + numFiles = input.get(0).files ? input.get(0).files.length : 1, + label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); + input.trigger('fileselect', [numFiles, label, input.get(0).files]); + input.val(""); + }, + + _readDataURL: function(event, numFiles, filename, files){ + if (files.length>1) console.log("too many files selected"); + var reader = new FileReader(); + reader.readAsDataURL(files[0]); + var self = this; + reader.onload = (function() { + return function(e) { + self._loadMeshFromURL(e.target.result); + self.model.set("filename", filename); + } + })(); + }, + + _loadMeshFromURL: function(url){ + var loader = new THREE.STLLoader(); + loader.addEventListener('load', this._onMeshLoad); + loader.load(url); + }, + + _onMeshLoad: function(e){ + this.model.set("geometry", e.content); + }, + + _removeMesh: function(){ + this.model.remove(); }, render: function(){ - this.$el.html(this.template()); + this.$el.html(this.template(this.model.attributes)); }, template: _.template('\ - Filename:<br/>\ + Filename: <%= filename %><br/>\ Rotate:<br/>\ Scale:<br/><br/>\ + <a href="#" id="removeFillGeo" class=" btn btn-block btn-lg btn-default">Remove Mesh</a><br/>\ <span class="btn btn-default btn-file fullWidth">\ Upload STL<input id="uploadMesh" type="file">\ </span><br/>\ diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js index 28286ebbbab79697af2b90dbaeee7f91feb24fe5..e3efeaaccd98307ac05f5f10327ee34c40dc9a5a 100644 --- a/js/menus/LatticeMenuView.js +++ b/js/menus/LatticeMenuView.js @@ -47,7 +47,8 @@ LatticeMenuView = Backbone.View.extend({ Cell Connection: <%= formattedConnectionType %><br/>\ Scale: <%= scale %><br/>\ Column Separation:<br/>\ - NumCells: <%= numCells %><br/><br/>\ + NumCells: <%= numCells %><br/>\ + Show Bounding Box:<br/><br/>\ <a href="#" id="latticeMenuClearCells" class=" btn btn-block btn-lg btn-default">Clear All Cells</a><br/>\ ') diff --git a/js/models/fillGeometry.js b/js/models/fillGeometry.js index 85b86453aad244d12cd7b8ff4fc166fa0de297b2..3903bd2e846d14224b9f6d1e0d66c4cab25104cb 100644 --- a/js/models/fillGeometry.js +++ b/js/models/fillGeometry.js @@ -11,8 +11,8 @@ FillGeometry = Backbone.Model.extend({ shading: THREE.FlatShading, transparent:true, opacity:0.2}), - geometry: new THREE.BoxGeometry(100, 100, 100), - filename: "Cube", + geometry: null, + filename: "No File Loaded", orientation: [0,0,0], scale: [1.0,1.0,1.0] }, @@ -24,14 +24,16 @@ FillGeometry = Backbone.Model.extend({ this.on("change:orientation change:scale", this.updateBoundingBox); this.on("change:geometry", this.buildNewMesh); - this.buildNewMesh(); }, buildNewMesh:function(){ + this.remove(); this.set({orientation:this.defaults.orientation, scale:this.defaults.scale}, {silent:true});//restore defaults var mesh = new THREE.Mesh(this.get("geometry"), this.get("material")); this.makeBoundingBoxHelper(mesh); this.set({mesh: mesh}); + window.three.sceneAdd(mesh); + window.three.render(); //send new geometry out to workers // _.each(workers.allWorkers, function(worker){ @@ -40,28 +42,35 @@ FillGeometry = Backbone.Model.extend({ }, getBounds: function(){//bounds is the bounding box of the mesh geometry (before scaling) - this.get("mesh").geometry.computeBoundingBox(); - this.set("bounds", this.get("geometry").boundingBox.clone()); +// this.get("mesh").geometry.computeBoundingBox(); +// this.set("bounds", this.get("geometry").boundingBox.clone()); }, makeBoundingBoxHelper: function(mesh){ - var helper = new THREE.BoundingBoxHelper(mesh, 0x000000); - helper.update(); - this.set("boundingBoxHelper", helper); +// var helper = new THREE.BoundingBoxHelper(mesh, 0x000000); +// helper.update(); +// this.set("boundingBoxHelper", helper); }, updateBoundingBox: function(){ - this.get("boundingBoxHelper").update(); - this.trigger("change:boundingBoxHelper"); +// this.get("boundingBoxHelper").update(); +// this.trigger("change:boundingBoxHelper"); + }, + + remove: function(){ + if (!this.get("mesh")) return; + window.three.sceneRemove(this.get("mesh")); + this.set("mesh", null); + window.three.render(); }, scale: function(scale){ - var currentScale = this.get("scale"); - for (var i=0;i<currentScale.length;i++){ - if (!scale[i]) scale[i] = currentScale[i]; - } - this.get("mesh").scale.set(scale[0], scale[1], scale[2]); - this.set("scale", scale); +// var currentScale = this.get("scale"); +// for (var i=0;i<currentScale.length;i++){ +// if (!scale[i]) scale[i] = currentScale[i]; +// } +// this.get("mesh").scale.set(scale[0], scale[1], scale[2]); +// this.set("scale", scale); } });