import working

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:&nbsp;&nbsp;<%= 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/>\

js/menus/LatticeMenuView.js

@@ -47,7 +47,8 @@ LatticeMenuView = Backbone.View.extend({
         Cell Connection:&nbsp;&nbsp;<%= formattedConnectionType %><br/>\
         Scale:&nbsp;&nbsp;<%= scale %><br/>\
         Column Separation:<br/>\
-        NumCells:&nbsp;&nbsp;<%= numCells %><br/><br/>\
+        NumCells:&nbsp;&nbsp;<%= numCells %><br/>\
+        Show Bounding Box:<br/><br/>\
         <a href="#" id="latticeMenuClearCells" class=" btn btn-block btn-lg btn-default">Clear All Cells</a><br/>\
         ')
 

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);
     }
 });