Add new, load, and save buttons

furnishup · Oct 20, 2015 · af872b7 · af872b7
1 parent af47af8
commit af872b7
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 5 deletions.
diff --git a/example/css/example.css b/example/css/example.css
@@ -97,6 +97,12 @@ div {
   overflow-y: auto; 
 }
 
+#main-controls {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  padding: 0;  
+}
 
 #camera-controls {
   position: absolute;
@@ -130,3 +136,21 @@ div {
   cursor: pointer;
 }
 
+.btn-file {
+  display: inline-block;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  cursor: inherit;
+  display: block;
+}
diff --git a/example/index.html b/example/index.html
@@ -135,6 +135,19 @@
           <!-- 3D Viewer -->
           <div id="viewer">
 
+            <div id="main-controls">
+              <a href="#" class="btn btn-default btn-sm" id="new">
+                New
+              </a>
+              <a href="#" class="btn btn-default btn-sm" id="saveFile">
+                Save
+              </a>
+              <a class="btn btn-sm btn-default btn-file">
+               <input type="file" class="hidden-input" id="loadFile">
+               Load
+              </a>
+            </div>
+
             <div id="camera-controls">
               <a href="#" class="btn btn-default bottom" id="zoom-out">
                 <span class="glyphicon glyphicon-zoom-out"></span>

diff --git a/example/js/example.js b/example/js/example.js
@@ -465,6 +465,43 @@ var ViewerFloorplanner = function(blueprint3d) {
   init();
 }; 
 
+var mainControls = function(blueprint3d) {
+  var blueprint3d = blueprint3d;
+
+  function newDesign() {
+    blueprint3d.model.loadSerialized('{"floorplan":{"corners":{"f90da5e3-9e0e-eba7-173d-eb0b071e838e":{"x":204.85099999999989,"y":289.052},"da026c08-d76a-a944-8e7b-096b752da9ed":{"x":672.2109999999999,"y":289.052},"4e3d65cb-54c0-0681-28bf-bddcc7bdb571":{"x":672.2109999999999,"y":-178.308},"71d4f128-ae80-3d58-9bd2-711c6ce6cdf2":{"x":204.85099999999989,"y":-178.308}},"walls":[{"corner1":"71d4f128-ae80-3d58-9bd2-711c6ce6cdf2","corner2":"f90da5e3-9e0e-eba7-173d-eb0b071e838e","frontTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0},"backTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0}},{"corner1":"f90da5e3-9e0e-eba7-173d-eb0b071e838e","corner2":"da026c08-d76a-a944-8e7b-096b752da9ed","frontTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0},"backTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0}},{"corner1":"da026c08-d76a-a944-8e7b-096b752da9ed","corner2":"4e3d65cb-54c0-0681-28bf-bddcc7bdb571","frontTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0},"backTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0}},{"corner1":"4e3d65cb-54c0-0681-28bf-bddcc7bdb571","corner2":"71d4f128-ae80-3d58-9bd2-711c6ce6cdf2","frontTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0},"backTexture":{"url":"rooms/textures/wallmap.png","stretch":true,"scale":0}}],"wallTextures":[],"floorTextures":{},"newFloorTextures":{}},"items":[]}');
+  }
+
+  function loadDesign() {
+    files = $("#loadFile").get(0).files;
+    var reader  = new FileReader();
+    reader.onload = function(event) {
+        var data = event.target.result;
+        blueprint3d.model.loadSerialized(data);
+    }
+    reader.readAsText(files[0]);
+  }
+
+  function saveDesign() {
+    var data = blueprint3d.model.exportSerialized();
+    var a = window.document.createElement('a');
+    var blob = new Blob([data], {type : 'text'});
+    a.href = window.URL.createObjectURL(blob);
+    a.download = 'design.blueprint3d';
+    document.body.appendChild(a)
+    a.click();
+    document.body.removeChild(a)
+  }
+
+  function init() {
+    $("#new").click(newDesign);
+    $("#loadFile").change(loadDesign);
+    $("#saveFile").click(saveDesign);
+  }
+
+  init();
+}
+
 /*
  * Initialize!
  */
@@ -487,11 +524,7 @@ $(document).ready(function() {
   var sideMenu = new SideMenu(blueprint3d, viewerFloorplanner, modalEffects);
   var textureSelector = new TextureSelector(blueprint3d, sideMenu);        
   var cameraButtons = new CameraButtons(blueprint3d);
-
-  // Simple hack for exporting rooms.
-  $(window).dblclick(function() {
-    console.log(blueprint3d.model.exportSerialized())
-  })
+  mainControls(blueprint3d);
 
   // This serialization format needs work
   // Load a simple rectangle room