diff --git a/css/main.css b/css/main.css index 8a877f90922a493ea51b703cad287c2b6d164118..fcacc16b1c500e40a4800f6242fb73a45cef83ba 100644 --- a/css/main.css +++ b/css/main.css @@ -130,8 +130,9 @@ nav .btn { #menuContent{ padding: 30px; + height:100%; /*min-height:100%;*/ - overflow-y: auto; + /*overflow-y: auto;*/ } hr { diff --git a/data/marsSurface.jpg b/data/marsSurface.jpg new file mode 100644 index 0000000000000000000000000000000000000000..796a7e7fc69c060117b338a61daf33b702151ecf Binary files /dev/null and b/data/marsSurface.jpg differ diff --git a/js/menus/AnimationMenuView.js b/js/menus/AnimationMenuView.js new file mode 100644 index 0000000000000000000000000000000000000000..fb22f7948f03df0f5f8bb389ea85335786fefa83 --- /dev/null +++ b/js/menus/AnimationMenuView.js @@ -0,0 +1,44 @@ +/** + * Created by aghassaei on 2/1/15. + */ + + +AnimationMenuView = Backbone.View.extend({ + + el: "#menuContent", + + events: { + "click .sceneType": "_changeScene" + }, + + initialize: function(options){ + + this.appState = options.appState; + + //bind events + this.listenTo(this.model, "change:currentScene", this.render); + }, + + _changeScene: function(e){ + e.preventDefault(); + this.model.set("currentScene", $(e.target).data("type")); + }, + + render: function(){ + if (this.appState.get("currentTab") != "animate") return; +// this.$el.html(this.template(this.model.attributes)); + }, + + template: _.template('\ + Scene: \ + <div class="btn-group">\ + <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allScenes[currentScene] %><span class="caret"></span></button>\ + <ul role="menu" class="dropdown-menu">\ + <% _.each(_.keys(allScenes), function(key){ %>\ + <li><a class="sceneType" data-type="<%= key %>" href="#"><%= allScenes[key] %></a></li>\ + <% }); %>\ + </ul>\ + </div><br/><br/>\ + ') + +}); \ No newline at end of file diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js index 0bf43a126f956696fd48421928b338c6f2f546c2..78b9e44280864c935c0a0f7c8c3c3fa1aed159d8 100644 --- a/js/menus/MenuWrapperView.js +++ b/js/menus/MenuWrapperView.js @@ -21,6 +21,7 @@ MenuWrapper = Backbone.View.extend({ this.sketchMenu = new SketchMenuView({model:options.lattice, appState:this.model}); this.partMenu = new PartMenuView({model:options.lattice, appState:this.model}); this.scriptMenu = new ScriptMenuView({appState:this.model}); + this.animationMenu = new AnimationMenuView({model:options.lattice.get("basePlane"), appState:this.model}); this.lattice = options.lattice; @@ -65,6 +66,8 @@ MenuWrapper = Backbone.View.extend({ this.partMenu.render(); } else if (tabName == "script"){ this.scriptMenu.render(); + } else if (tabName == "animate"){ + this.animationMenu.render(); } else { console.warn("no tab initialized!"); $("#menuContent").html('Something goes here eventually.');//clear out content from menu diff --git a/js/models/BasePlane.js b/js/models/BasePlane.js index f4a283d2b47203b419da3b312e2abb87d92400c9..6d0b34dc796ac79f9c028fee5cf8fbb7c5bc95c8 100644 --- a/js/models/BasePlane.js +++ b/js/models/BasePlane.js @@ -11,10 +11,15 @@ BasePlane = Backbone.Model.extend({ dimX: 100, dimY: 100, material: new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide}), + currentScene: "default", + allScenes: {default:"Default", "mars":"Mars"} }, initialize: function(options){ + //bind events + this.listenTo(this, "change:currentScene", this._renderForCurrentScene); + //draw mesh this.set("mesh", this._makeBasePlaneMesh(options.cellType, options.connectionType)); this.updateScale(options.scale); @@ -22,6 +27,10 @@ BasePlane = Backbone.Model.extend({ }, + _renderForCurrentScene: function(){ + console.log("amanda"); + }, + updateGeometry: function(cellType, connectionType, scale){ this._removeMesh(); this.set("mesh", this._makeBasePlaneMesh(cellType, connectionType)); diff --git a/main.html b/main.html index 19e10018edaaf6d3fa7d2f5687c87135305161d3..932cce6d3abe30a4a870738980f51e8207edc0b0 100644 --- a/main.html +++ b/main.html @@ -66,6 +66,7 @@ <script src="js/menus/PartMenuView.js"></script> <script src="js/menus/SketchMenuView.js"></script> <script src="js/menus/ScriptMenuView.js"></script> + <script src="js/menus/AnimationMenuView.js"></script> <script src="js/menus/exportMenu.js"></script> <script src="js/threeViews/Highlighter.js"></script>