From d73b3dd52aa0eb5455f7f58e3c8a1bcad4ecfb44 Mon Sep 17 00:00:00 2001 From: Amanda Ghassaei <amandaghassaei@gmail.com> Date: Tue, 27 Jan 2015 03:03:57 -0500 Subject: [PATCH] import working --- js/menus/ImportMenuView.js | 56 +++++++++++++++++++++++++++++++++++-- js/menus/LatticeMenuView.js | 3 +- js/models/fillGeometry.js | 41 ++++++++++++++++----------- 3 files changed, 80 insertions(+), 20 deletions(-) diff --git a/js/menus/ImportMenuView.js b/js/menus/ImportMenuView.js index c2d46acb..70f1e01a 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 28286ebb..e3efeaac 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 85b86453..3903bd2e 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); } }); -- GitLab