units

js/menus/CamMenuView.js

@@ -9,6 +9,7 @@ CamMenuView = Backbone.View.extend({
 
     events: {
         "click .camProcess":                            "_selectCamProcess",
+        "click .units":                                 "_changeUnits",
         "click #saveCam":                               "_processAndSave"
     },
 
@@ -20,6 +21,7 @@ CamMenuView = Backbone.View.extend({
 
         _.bindAll(this, "render");
         this.listenTo(this.assembler, "change", this.render);
+        this.listenTo(this.model, "change:units", this.render);
     },
 
     _selectCamProcess: function(e){
@@ -27,6 +29,11 @@ CamMenuView = Backbone.View.extend({
         this.assembler.set("camProcess", $(e.target).data("type"));
     },
 
+    _changeUnits: function(e){
+        e.preventDefault();
+        this.model.set("units", $(e.target).data("type"));
+    },
+
     _processAndSave: function(e){
         e.preventDefault();
         this.assembler.processAndSave();
@@ -47,6 +54,15 @@ CamMenuView = Backbone.View.extend({
                     <% }); %>\
                 </ul>\
             </div><br/><br/>\
+         Units: &nbsp;&nbsp;\
+            <div class="btn-group">\
+                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allUnitTypes[units] %><span class="caret"></span></button>\
+                <ul role="menu" class="dropdown-menu">\
+                    <% _.each(_.keys(allUnitTypes), function(key){ %>\
+                        <li><a class="units" data-type="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>\
+                    <% }); %>\
+                </ul>\
+            </div><br/><br/>\
             <a href="#" id="saveCam" class=" btn btn-block btn-lg btn-default">Process and Save</a><br/>\
         ')
 

js/menus/LatticeMenuView.js

@@ -10,6 +10,7 @@ LatticeMenuView = Backbone.View.extend({
     events: {
         "click #latticeMenuClearCells":                 "_clearCells",
         "change #latticeScale":                         "_changeScale",
+        "click .units":                                 "_changeUnits",
         "click .cellType":                              "_changeCellType",
         "click .connectionType":                        "_changeConnectionType",
         "slide #scaleSlider":                           "_sliderDidSlide",
@@ -27,6 +28,7 @@ LatticeMenuView = Backbone.View.extend({
         _.bindAll(this, "render");
 
         this.listenTo(this.lattice, "change", this.render);
+        this.listenTo(this.model, "change:units", this.render);
     },
 
     _clearCells: function(e){
@@ -41,6 +43,11 @@ LatticeMenuView = Backbone.View.extend({
         this.lattice.set("scale", val);
     },
 
+    _changeUnits: function(e){
+        e.preventDefault();
+        this.model.set("units", $(e.target).data("type"));
+    },
+
     _sliderDidSlide: function(e){
         var scale = $(e.target)[0].value;
         this.lattice.previewScaleChange(scale);//does not trigger lattice change event - no rerendering of ui
@@ -143,6 +150,15 @@ LatticeMenuView = Backbone.View.extend({
         <br/>\
         Scale:&nbsp;&nbsp;<input id="scaleSlider" data-slider-id="ex1Slider" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="0.1" data-slider-value="<%= scale %>"/>\
         <br/><input id="latticeScale" value="<%= scale %>" placeholder="enter scale" class="form-control" type="text"><br/>\
+        Units: &nbsp;&nbsp;\
+            <div class="btn-group">\
+                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allUnitTypes[units] %><span class="caret"></span></button>\
+                <ul role="menu" class="dropdown-menu">\
+                    <% _.each(_.keys(allUnitTypes), function(key){ %>\
+                        <li><a class="units" data-type="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>\
+                    <% }); %>\
+                </ul>\
+            </div><br/><br/>\
         Num Cells:&nbsp;&nbsp;<%= numCells %><br/>\
         <br/>\
         <a href="#" id="latticeMenuClearCells" class=" btn btn-block btn-lg btn-default">Clear All Cells</a><br/>\

js/models/AppState.js

@@ -59,6 +59,12 @@ AppState = Backbone.Model.extend({
 
         menuIsVisible: true,
 
+        allUnitTypes: {
+            mm: "mm",
+            inches: "Inches"
+        },
+        units: "mm",
+
         //key bindings
         shift: false,
         deleteMode: false,