From 4024085b09261c23cd89227e340037e0238072c7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 11 Aug 2015 14:15:31 -0400
Subject: uploader functioning

---
 views/controls/blueprint/editor.ejs | 104 ++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 views/controls/blueprint/editor.ejs

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
new file mode 100644
index 0000000..6b80287
--- /dev/null
+++ b/views/controls/blueprint/editor.ejs
@@ -0,0 +1,104 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	overflow: hidden;
+}
+#perspective,
+#perspective .mx-scene {
+	position: absolute;
+	left:0%;
+	top:0px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+.hud {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
+}
+.ortho-hud {
+  left: 50%;
+  border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
+
+.blueprintUpload {
+  width: 240px;
+}
+.blueprints .blueprint {
+  border: 1px solid black;
+  padding: 5px;
+  height: 100px;
+  max-width: 200px;
+  cursor: pointer;
+}
+</style>
+
+<div id="blueprintView">
+  <div id="perspective"></div>
+  <div id="orthographic"></div>
+
+  <div class="hud persp-hud">
+    <input type="text" id="url" placeholder="paste an image URL here!">
+    <span class="ion-ionic active" data-role="orbit-mode"></span>
+    <span class="ion-archive" data-role="keyboard-mode"></span>
+  </div>
+
+  <div class="hud ortho-hud">
+    <span class="ion-navigate" data-role="arrow-mode"></span>
+    <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+    <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+    <span class="ion-scissors" data-role="eraser-mode"></span>
+  </div>
+</div>
+
+<div class="mediaDrawer fixed animate active blueprintEditor">
+  <span class="close">X</span>
+  <div class="box">
+  
+    <h2>Upload your Blueprint</h2>
+  
+    <div class="blueprintUpload">
+      <input type="hidden" name="_csrf" value="[[- token ]]">
+      <div class="wallpaperUpload toolButton">
+        <form>
+          <span class="ion-ios-upload-outline upload-icon"></span>
+          <label>Upload</label>
+          <input type="file" accept="image/*" multiple>
+        </form>
+      </div>
+      <input type="text" class="url" placeholder="Enter an image URL or...">
+      <div class="blueprints">
+        <h5>Your uploaded blueprints</h5>
+      </div>
+    </div>
+    
+    Please tell us the scale of your blueprint.
+    Click both corners of a wall, and then enter how long the wall is.
+    https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg
+
+    <div id="blueprintMap">
+    </div>
+  
+    <div id="blueprintDimensions">
+      <input type="text" name="blueprint-dimensions">
+      <select id="blueprint-units" name="blueprint-units">
+        <option value="ft">foot</option>
+        <option value="m">meter</option>
+      </select>
+  
+      <button id="saveBlueprint">Save</button>
+    </div>
+
+  </div>
+</div>
-- 
cgit v1.2.3-70-g09d2


From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 11 Aug 2015 16:50:31 -0400
Subject: blueprint upload styling

---
 .../javascripts/rectangles/engine/map/ui/ortho.js  |   4 +-
 .../javascripts/ui/blueprint/BlueprintEditor.js    |  30 -----
 .../javascripts/ui/blueprint/BlueprintScaler.js    |  43 ++++++++
 .../javascripts/ui/blueprint/BlueprintUpload.js    |  36 ++++--
 .../javascripts/ui/blueprint/BlueprintView.js      |   2 +-
 views/controls/blueprint/editor.ejs                | 122 +++++++++++++++++----
 views/partials/scripts.ejs                         |   2 +-
 7 files changed, 178 insertions(+), 61 deletions(-)
 delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js
 create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScaler.js

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
index 52f7339..5be7446 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
@@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){
 	}
 	base.set_tool = function(s){
 	  console.log("set tool to", s)
-	  base.tools[currentTool].cancel()
+	  if (base.tools[currentTool]) {
+	    base.tools[currentTool].cancel()
+	  }
 	  currentTool = s
 	  tool = base.tools[currentTool]
 	}
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
deleted file mode 100644
index 227c1c8..0000000
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ /dev/null
@@ -1,30 +0,0 @@
-
-var BlueprintEditor = ModalView.extend({
-	el: ".blueprintEditor",
-	
-	events: {
-    "change [name=blueprint-dimensions]": "changeDimensions",
-    "change [name=blueprint-units]": "changeUnits",
-    "click #saveBlueprint": "save",
-	},
-	
-	initialize: function(){
-    this.$blueprintMap = this.$("#blueprintMap")
-    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
-    this.$dimensions = this.$("[name=blueprint-dimensions]")
-    this.$units = this.$("[name=blueprint-units]")
-    this.$save = this.$("#saveBlueprint")
-
-    this.map = new Map ({ type: 'ortho' })
-
-    this.$blueprintMap.append(this.map.el)
-	},
-
-	changeDimensions: function(){
-	},
-	changeUnits: function(){
-	},
-	save: function(){
-	},
-
-})
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
new file mode 100644
index 0000000..e11b61e
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -0,0 +1,43 @@
+
+var BlueprintScaler = ModalView.extend({
+	el: ".blueprintScaler",
+	
+	events: {
+    "change [name=blueprint-dimensions]": "changeDimensions",
+    "change [name=blueprint-units]": "changeUnits",
+    "click #saveBlueprint": "save",
+	},
+	
+	initialize: function(){
+    this.$blueprintMap = this.$("#blueprintMap")
+    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
+    this.$dimensions = this.$("[name=blueprint-dimensions]")
+    this.$units = this.$("[name=blueprint-units]")
+    this.$save = this.$("#saveBlueprint")
+
+    this.map = map = new Map ({
+      type: "ortho",
+      el: this.$blueprintMap.get(0),
+      width: window.innerWidth/2,
+      height: window.innerHeight,
+      zoom: -2,
+      zoom_min: -6.2,
+      zoom_max: 1,
+    })
+    map.ui.add_tool("arrow", new ArrowTool)
+    map.ui.add_tool("position", new PositionTool)
+    map.ui.set_tool("position")
+	},
+	
+	pick: function(){
+    
+	},
+
+	changeDimensions: function(){
+	},
+	changeUnits: function(){
+	},
+	save: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
index 9467715..deb1075 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
@@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({
     "change .url": "enterUrl",
     "keydown .url": "enterSetUrl",
     
-    "click .blueprint": "choose",
+    "click .blueprint": "pick",
+    "click .remove": "destroy",
   },
 	
 	initialize: function(opt){
@@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({
 	populate: function(data){
 		this.loaded = true
 		if (data && data.length) {
+		  this.$blueprints.show()
 		  data.forEach(this.append.bind(this))
-		  this.$(".txt").hide()
+		  this.show()
 		}
 		else {
-		  this.$(".txt").show()
+		  this.show()
 		}
 	},
 	
 	pick: function(e){
 	  var $el = $(e.currentTarget)
-	  // load map with it
+	  var media = $el.data("media")
+	  this.hide()
+	  this.parent.blueprintScaler.pick(media)
 	},
   
-	destroy: function(_id, cb){
+	destroy: function(e){
+	  e.stopPropagation()
+	  var $el = $(e.currentTarget)
+	  var _id = $el.closest(".blueprint").data("id")
+    $el.remove()
 		$.ajax({
 			type: "delete",
 			url: this.destroyAction,
 			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
-		}).complete(cb || function(){})
+		}).complete(function(){
+		})
 	},
 	
 	show: function(){
@@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({
 	},
 	
 	add: function(media){
+    this.$blueprints.show()
 	  this.append(media)
+	  this.hide()
+	  this.parent.blueprintScaler.pick(media)
 	},
 
 	append: function(media){
-	  var $el = $("<img>")
-	  $el.attr("src", media.url)
+	  var $el = $("<span>")
+	  var img = new Image ()
+	  img.src = media.url
+	  var remove = document.createElement("span")
+	  remove.className = "remove"
+	  remove.innerHTML = "<span>x</span>"
+	  
 	  $el.data("id", media._id)
+	  $el.data("media", media)
+	  $el.append(img)
+	  $el.append(remove)
 	  $el.addClass("blueprint")
 	  this.$blueprints.append($el)
 	},
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 40c61d7..a803f12 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -12,7 +12,7 @@ var BlueprintView = View.extend({
 // 		this.colorControl = new ColorControl ({ parent: this })
 // 		this.cursor = new HelpCursor({ parent: this })
     this.blueprintUpload = new BlueprintUpload ({ parent: this })
-    this.blueprintEditor = new BlueprintEditor ({ parent: this })
+    this.blueprintScaler = new BlueprintScaler ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 6b80287..aec5e25 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -33,13 +33,88 @@ body {
 .hud span.active { color: #000; }
 
 .blueprintUpload {
-  width: 240px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 340px;
+  position: absolute;
+  top: 50%; left: 50%;
+  background: white;
+  padding: 10px;
+  border: 1px solid black;
+  box-shadow: -3px 3px #000;
+  -webkit-transform: translate3D(0%,-200%,0);
+  transform: translate3D(0%,-200%,0);
+  margin-left: -175px;
+  margin-top: -200px;
+  opacity: 0;
+}
+.blueprintUpload.active {
+  -webkit-transform: translate3D(0,0,0);
+  transform: translate3D(0,0,0);
+  opacity: 1;
+}
+.blueprintUpload .toolButton {
+  float: none;
+  width: 108px;
+  display: inline-block;
+}
+.blueprintUpload .url {
+  font-size: 15px;
+  border: 1px solid #888;
+  padding: 2px;
+  font-weight: 300;
+  position: relative;
+  top: 3px;
+  margin-right: 10px;
+  width: 190px;
+}
+.blueprintUpload p {
+  font-weight: 300;
+  font-size: 13px;
+}
+.blueprintUpload .blueprints {
+  display: none;
+}
+.blueprintUpload .blueprints h5 {
+  width: 250px;
+  margin: 10px auto;
+  padding-top: 9px;
 }
 .blueprints .blueprint {
   border: 1px solid black;
-  padding: 5px;
+  background: white;
+  padding: 0px;
+  position: relative;
+  display: inline-block;
+}
+.blueprints .blueprint img {
   height: 100px;
   max-width: 200px;
+  display: block;
+  cursor: pointer;
+}
+.blueprints .blueprint .remove {
+  box-shadow: 0 1px 2px #888;
+  cursor: pointer;
+  position: absolute;
+  color: red;
+  top: 7px;
+  right: 7px;
+  width: 20px; height: 20px;
+  text-align: center;
+  background: #fff;
+  border-radius: 50%;
+}
+.blueprints .blueprint .remove span {
+  position: relative;
+  top: -2px;
+}
+.blueprintUpload .wallpaperUpload .upload-icon {
+  margin: 0 4px;
+}
+.uploadNewBlueprint {
+  color: #333;
+  border-bottom: 1px solid;
   cursor: pointer;
 }
 </style>
@@ -63,42 +138,49 @@ body {
 </div>
 
 <div class="mediaDrawer fixed animate active blueprintEditor">
-  <span class="close">X</span>
   <div class="box">
   
-    <h2>Upload your Blueprint</h2>
-  
     <div class="blueprintUpload">
+      <h2>Upload your Blueprint</h2>
+      <p>
+        Upload an image which you will trace to make a floor plan.
+        Images should be at least 1000x1000.
+      </p>
       <input type="hidden" name="_csrf" value="[[- token ]]">
+      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="wallpaperUpload toolButton">
         <form>
           <span class="ion-ios-upload-outline upload-icon"></span>
-          <label>Upload</label>
+          <label>Upload a File</label>
           <input type="file" accept="image/*" multiple>
         </form>
       </div>
-      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="blueprints">
         <h5>Your uploaded blueprints</h5>
       </div>
     </div>
     
-    Please tell us the scale of your blueprint.
-    Click both corners of a wall, and then enter how long the wall is.
-    https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg
+    <div class="blueprintScaler">
+      <div class="blueprintInfo">
+        Please tell us the scale of your blueprint.
+        Click both corners of a wall, and then enter how long the wall is.
+        <br><br>
+        Do you want to <span class="uploadNewBlueprint">upload a blueprint?</span>
+      </div>
 
-    <div id="blueprintMap">
-    </div>
+      <div id="blueprintMap">
+      </div>
   
-    <div id="blueprintDimensions">
-      <input type="text" name="blueprint-dimensions">
-      <select id="blueprint-units" name="blueprint-units">
-        <option value="ft">foot</option>
-        <option value="m">meter</option>
-      </select>
+      <div id="blueprintDimensions">
+        <input type="text" name="blueprint-dimensions">
+        <select id="blueprint-units" name="blueprint-units">
+          <option value="ft">foot</option>
+          <option value="m">meter</option>
+        </select>
   
-      <button id="saveBlueprint">Save</button>
+        <button id="saveBlueprint">Save</button>
+      </div>
     </div>
-
+    
   </div>
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 2a93e9b..136bd4d 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -128,7 +128,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 554463ca8e8492bfd5f0f496e3a2291bfb495f80 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 11 Aug 2015 18:49:29 -0400
Subject: blueprint scaler stuff

---
 .../assets/javascripts/mx/primitives/mx.image.js   |  17 ++-
 .../javascripts/ui/blueprint/BlueprintScaler.js    |  34 +++++-
 .../javascripts/ui/blueprint/BlueprintUpload.js    |   5 +-
 public/assets/stylesheets/app.css                  |  89 +++++++++++++++
 public/assets/test/ortho4.html                     |   2 +
 views/controls/blueprint/editor.ejs                | 120 +++++----------------
 6 files changed, 163 insertions(+), 104 deletions(-)

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index f9de141..33b1373 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -1,5 +1,7 @@
 MX.Image = MX.Object3D.extend({
   init: function (ops) {
+    ops = ops || {}
+    
   	this.type = "Image"
 		this.media = ops.media
     this.width = 0
@@ -41,15 +43,20 @@ MX.Image = MX.Object3D.extend({
       layer.dirty = true
       layer.update()
       layer.ops.onload
+      
+      if (ops.keepImage) {
+        layer.image = image
+      }
     }
-    image.src = ops.src;
-
-    if (ops.keepImage) {
-      this.image = image
-    }
+    
+    if (ops.src) image.src = ops.src
+    else if (ops.media) image.src = ops.media.url
+    else if (ops.url) image.src = ops.url
   },
 
   draw: function(ctx, recenter){
+    if (! this.image) { return }
+    
     if (recenter) {
       ctx.save()
       ctx.scale(-1, 1)
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index e11b61e..a81c89b 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -18,7 +18,7 @@ var BlueprintScaler = ModalView.extend({
     this.map = map = new Map ({
       type: "ortho",
       el: this.$blueprintMap.get(0),
-      width: window.innerWidth/2,
+      width: window.innerWidth,
       height: window.innerHeight,
       zoom: -2,
       zoom_min: -6.2,
@@ -27,10 +27,38 @@ var BlueprintScaler = ModalView.extend({
     map.ui.add_tool("arrow", new ArrowTool)
     map.ui.add_tool("position", new PositionTool)
     map.ui.set_tool("position")
+    
+    scene = scene || { camera: { x: 0, y: 0, z: 0 } }
+    
+    this.floorplan = new MX.Image ()
+    
+    this.animate()
 	},
 	
-	pick: function(){
-    
+	pick: function(media){
+    this.floorplan.load({ media: media, keepImage: true })
+	},
+	
+	animate: function(t){
+    requestAnimationFrame(this.animate.bind(this))
+
+    var dt = t - this.last_t
+    this.last_t = t
+
+    if (! t) return
+
+    this.map.update(t)
+
+    this.map.draw.ctx.save()
+    this.map.draw.translate()
+
+    this.floorplan.draw(this.map.draw.ctx, true)
+
+    this.map.draw.coords()
+
+    this.map.draw.mouse(this.map.ui.mouse.cursor)
+
+    this.map.draw.ctx.restore()
 	},
 
 	changeDimensions: function(){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
index deb1075..498575a 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
@@ -36,8 +36,9 @@ var BlueprintUpload = UploadView.extend({
 		this.loaded = true
 		if (data && data.length) {
 		  this.$blueprints.show()
-		  data.forEach(this.append.bind(this))
-		  this.show()
+      data.forEach(this.append.bind(this))
+      this.hide()
+      this.parent.blueprintScaler.pick(data[0])
 		}
 		else {
 		  this.show()
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 0f89242..6507cc1 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -3253,6 +3253,95 @@ a[data-role="forgot-password"] {
 }
 
 
+/* blueprint upload box */
+
+.blueprintUpload {
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 340px;
+  position: absolute;
+  top: 50%; left: 50%;
+  background: white;
+  padding: 10px;
+  border: 1px solid black;
+  box-shadow: -3px 3px #000;
+  -webkit-transform: translate3D(0%,-200%,0);
+  transform: translate3D(0%,-200%,0);
+  margin-left: -175px;
+  margin-top: -200px;
+  opacity: 0;
+}
+.blueprintUpload.active {
+  -webkit-transform: translate3D(0,0,0);
+  transform: translate3D(0,0,0);
+  opacity: 1;
+}
+.blueprintUpload .toolButton {
+  float: none;
+  width: 108px;
+  display: inline-block;
+}
+.blueprintUpload .url {
+  font-size: 15px;
+  border: 1px solid #888;
+  padding: 2px;
+  font-weight: 300;
+  position: relative;
+  top: 3px;
+  margin-right: 10px;
+  width: 190px;
+}
+.blueprintUpload p {
+  font-weight: 300;
+  font-size: 13px;
+}
+.blueprintUpload .blueprints {
+  display: none;
+}
+.blueprintUpload .blueprints h5 {
+  width: 250px;
+  margin: 10px auto;
+  padding-top: 9px;
+}
+.blueprints .blueprint {
+  border: 2px solid black;
+  background: white;
+  padding: 0px;
+  position: relative;
+  display: inline-block;
+}
+.blueprints .blueprint img {
+  height: 100px;
+  max-width: 200px;
+  display: block;
+  cursor: pointer;
+}
+.blueprints .blueprint .remove {
+  box-shadow: -2px 2px #000;
+  cursor: pointer;
+  position: absolute;
+  color: red;
+  top: 7px;
+  right: 7px;
+  width: 20px; height: 20px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid black;
+}
+.blueprints .blueprint .remove span {
+  position: relative;
+  top: -2px;
+}
+.blueprintUpload .wallpaperUpload .upload-icon {
+  margin: 0 4px;
+}
+.uploadNewBlueprint {
+  color: #333;
+  border-bottom: 1px solid;
+  cursor: pointer;
+}
+
+
 /* KEYBOARD SHORTCUTS */
 
 .keyboard { float: left; width: 50%; margin-top: 50px; }
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
index 1c1adef..d704e0e 100644
--- a/public/assets/test/ortho4.html
+++ b/public/assets/test/ortho4.html
@@ -160,7 +160,9 @@ map.ui.placing = false
 
 $(window).resize(function(){
   scene.width = window.innerWidth/2
+  scene.height = window.innerHeight
   map.canvas.width = map.dimensions.a = window.innerWidth/2
+  map.canvas.height = map.dimensions.b = window.innerHeight/2
 })
 
 var wall_height = 180
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index aec5e25..308b4c8 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -32,90 +32,20 @@ body {
 .hud span { color: #888; cursor: pointer; }
 .hud span.active { color: #000; }
 
-.blueprintUpload {
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  width: 340px;
-  position: absolute;
-  top: 50%; left: 50%;
-  background: white;
-  padding: 10px;
-  border: 1px solid black;
-  box-shadow: -3px 3px #000;
-  -webkit-transform: translate3D(0%,-200%,0);
-  transform: translate3D(0%,-200%,0);
-  margin-left: -175px;
-  margin-top: -200px;
-  opacity: 0;
-}
-.blueprintUpload.active {
-  -webkit-transform: translate3D(0,0,0);
-  transform: translate3D(0,0,0);
-  opacity: 1;
-}
-.blueprintUpload .toolButton {
-  float: none;
-  width: 108px;
-  display: inline-block;
-}
-.blueprintUpload .url {
-  font-size: 15px;
-  border: 1px solid #888;
-  padding: 2px;
-  font-weight: 300;
-  position: relative;
-  top: 3px;
-  margin-right: 10px;
-  width: 190px;
-}
-.blueprintUpload p {
-  font-weight: 300;
+.blueprintInfo {
+  bottom: 14px;
+  left: 10px;
+  width: 270px;
   font-size: 13px;
+  font-weight: 300;
+  padding: 10px;
 }
-.blueprintUpload .blueprints {
-  display: none;
-}
-.blueprintUpload .blueprints h5 {
-  width: 250px;
-  margin: 10px auto;
-  padding-top: 9px;
-}
-.blueprints .blueprint {
-  border: 1px solid black;
-  background: white;
-  padding: 0px;
-  position: relative;
-  display: inline-block;
-}
-.blueprints .blueprint img {
-  height: 100px;
-  max-width: 200px;
-  display: block;
-  cursor: pointer;
-}
-.blueprints .blueprint .remove {
-  box-shadow: 0 1px 2px #888;
-  cursor: pointer;
-  position: absolute;
-  color: red;
-  top: 7px;
-  right: 7px;
-  width: 20px; height: 20px;
-  text-align: center;
-  background: #fff;
-  border-radius: 50%;
-}
-.blueprints .blueprint .remove span {
-  position: relative;
-  top: -2px;
-}
-.blueprintUpload .wallpaperUpload .upload-icon {
-  margin: 0 4px;
+.blueprintInfo .setting {
+  margin-bottom: 20px;
 }
-.uploadNewBlueprint {
-  color: #333;
-  border-bottom: 1px solid;
-  cursor: pointer;
+.blueprintInfo .setting.number input[type=text] {
+  width: 100px;
+  font-size: 16px;
 }
 </style>
 
@@ -139,7 +69,7 @@ body {
 
 <div class="mediaDrawer fixed animate active blueprintEditor">
   <div class="box">
-  
+
     <div class="blueprintUpload">
       <h2>Upload your Blueprint</h2>
       <p>
@@ -161,25 +91,27 @@ body {
     </div>
     
     <div class="blueprintScaler">
-      <div class="blueprintInfo">
+      <div class="blueprintInfo vvbox">
         Please tell us the scale of your blueprint.
-        Click both corners of a wall, and then enter how long the wall is.
+        Click two corners of a wall, and then enter how long the wall is.
         <br><br>
-        Do you want to <span class="uploadNewBlueprint">upload a blueprint?</span>
+        You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
+        <br><br>
+
+        <div class="setting number">
+          <label for="wall-length">length</label>
+          <input type="text" class="units" name="wall-length" id="wall-length">
+          <select id="blueprint-units" name="blueprint-units">
+            <option value="ft">feet</option>
+            <option value="m">meters</option>
+          </select>
+        </div>
+        <button id="saveBlueprint">Save</button>
       </div>
 
       <div id="blueprintMap">
       </div>
   
-      <div id="blueprintDimensions">
-        <input type="text" name="blueprint-dimensions">
-        <select id="blueprint-units" name="blueprint-units">
-          <option value="ft">foot</option>
-          <option value="m">meter</option>
-        </select>
-  
-        <button id="saveBlueprint">Save</button>
-      </div>
     </div>
     
   </div>
-- 
cgit v1.2.3-70-g09d2


From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 12 Aug 2015 18:38:12 -0400
Subject: functioning blueprint scaler

---
 .../javascripts/rectangles/engine/map/draw.js      |  2 +-
 .../rectangles/engine/map/tools/line.js            | 49 ++++++++++++
 .../assets/javascripts/rectangles/models/rect.js   |  6 ++
 .../javascripts/ui/blueprint/BlueprintScaler.js    | 91 ++++++++++++++++++++--
 .../javascripts/ui/blueprint/BlueprintView.js      |  3 +
 server/lib/schemas/Layout.js                       |  1 +
 views/controls/blueprint/editor.ejs                |  4 +-
 views/partials/scripts.ejs                         |  1 +
 8 files changed, 148 insertions(+), 9 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 11ba3f8..cc2f4d8 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -198,7 +198,7 @@ Map.Draw = function(map, opt){
 
 	//
 
-	function line (x,y,a,b,translation){
+	var line = draw.line = function (x,y,a,b,translation){
 		if (translation) {
 			x += translation.a
 			a += translation.a
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js
new file mode 100644
index 0000000..8f409a8
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js
@@ -0,0 +1,49 @@
+var LineTool = MapTool.extend(function(base){
+	var exports = {}
+	
+	var selected_point = null
+	
+	var line = exports.line = []
+	
+	var can_drag, dragging
+	
+	exports.down = function(e, cursor){
+	  this.cursor = cursor
+	  switch (line.length) {
+	    case 0:
+        line[0] = cursor.x_component()
+        can_drag = true
+        break
+      case 1:
+        line[1] = cursor.x_component()
+        can_drag = false
+        break
+      case 2:
+        line[0] = cursor.x_component()
+        line.pop()
+        can_drag = true
+        break
+    }
+	}
+	
+	exports.move = function(e, cursor){
+    this.cursor = cursor
+	}
+	
+	exports.drag = function(e, cursor){
+	  if (dragging) {
+	    line[1].a = cursor.x.b
+	    line[1].b = cursor.y.b
+	  }
+	  else if (can_drag && cursor.magnitude() > 10/map.zoom) {
+	    line[1] = cursor.y_component()
+	    dragging = true
+	  }
+	}
+	
+	exports.up = function(e, cursor){
+	  can_drag = dragging = false
+	}
+	
+	return exports
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js
index c667cf5..92c8c9e 100644
--- a/public/assets/javascripts/rectangles/models/rect.js
+++ b/public/assets/javascripts/rectangles/models/rect.js
@@ -39,6 +39,12 @@
 	Rect.prototype.clone = function(){
 		return new Rect( this.x.clone(), this.y.clone() )
 	}
+	Rect.prototype.x_component = function(){
+	  return new vec2( this.x.a, this.y.a )
+	}
+	Rect.prototype.y_component = function(){
+	  return new vec2( this.x.b, this.y.b )
+	}
 	Rect.prototype.assign = function(r) {
 	  this.x.assign(r.x)
 	  this.y.assign(r.y)
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index a81c89b..addf9a9 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -1,10 +1,13 @@
 
-var BlueprintScaler = ModalView.extend({
+var BlueprintScaler = ModalFormView.extend({
 	el: ".blueprintScaler",
 	
+	method: "/api/media/scale",
+	
 	events: {
     "change [name=blueprint-dimensions]": "changeDimensions",
     "change [name=blueprint-units]": "changeUnits",
+    "click .uploadNewBlueprint": "showBlueprintUpload",
     "click #saveBlueprint": "save",
 	},
 	
@@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({
     this.$blueprintMap = this.$("#blueprintMap")
     this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
     this.$dimensions = this.$("[name=blueprint-dimensions]")
+    this.$pixels = this.$("[name=blueprint-pixels]")
     this.$units = this.$("[name=blueprint-units]")
     this.$save = this.$("#saveBlueprint")
 
@@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({
       zoom_min: -6.2,
       zoom_max: 1,
     })
-    map.ui.add_tool("arrow", new ArrowTool)
-    map.ui.add_tool("position", new PositionTool)
-    map.ui.set_tool("position")
+    this.lineTool = new LineTool
+    map.ui.add_tool("line", this.lineTool)
+    map.ui.set_tool("line")
     
     scene = scene || { camera: { x: 0, y: 0, z: 0 } }
     
     this.floorplan = new MX.Image ()
     
-    this.animate()
+    this.animating = false
+	},
+	
+	showBlueprintUpload: function(){
+	  this.parent.blueprintUpload.show()
 	},
 	
 	pick: function(media){
+	  this.media = media
+    
+    if (!! media.scale) {
+      this.parent.useFloorplan(media)
+    }
+
     this.floorplan.load({ media: media, keepImage: true })
+
+    if (! this.animating) {
+      this.animating = true
+      this.animate()
+    }
 	},
 	
 	animate: function(t){
     requestAnimationFrame(this.animate.bind(this))
+    
+    if (! this.animating) return
 
     var dt = t - this.last_t
     this.last_t = t
@@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({
     this.map.draw.translate()
 
     this.floorplan.draw(this.map.draw.ctx, true)
+    
+    this.map.draw.ctx.strokeStyle = "#f00"
+    this.map.draw.ctx.lineWidth = 2/map.zoom
+    switch (this.lineTool.line.length) {
+      case 1:
+        this.map.draw.line(
+          this.lineTool.line[0].a,
+          this.lineTool.line[0].b,
+          this.lineTool.cursor.x.a,
+          this.lineTool.cursor.y.a
+        )
+        break
+      case 2:
+        this.map.draw.line(
+          this.lineTool.line[0].a,
+          this.lineTool.line[0].b,
+          this.lineTool.line[1].a,
+          this.lineTool.line[1].b
+        )
+        break
+    }
 
     this.map.draw.coords()
 
@@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({
 	},
 
 	changeDimensions: function(){
+	  app.units = this.$units.val()
+	  this.$dimensions.unitVal()
 	},
 	changeUnits: function(){
+	  app.units = this.$units.val()
+	  this.$dimensions.resetUnitVal()
+	},
+	lineLength: function(){
+	  if (this.lineTool.line.length !== 2) return 0
+	  var line = this.lineTool.line
+	  return dist( line[0].a, line[0].b, line[1].a, line[1].b )
+	}
+
+	validate: function(){
+	  var val = this.$dimensions.unitVal()
+	  var errors = []
+	  if (! this.lineLength()) {
+	    errors.push("no line")
+	    alert("Please click two corners of a wall and then specify how long it is in feet or meters.")
+	  }
+	  else if (val == 0) {
+	    errors.push("no measurement")
+	    alert("Please tell us how long the wall is in feet or meters.")
+	  }
+    return errors
 	},
-	save: function(){
+	
+	showErrors: function(){},
+	
+	serialize: function(){
+    var fd = new FormData()
+    fd.append( "_id", this.media._id)
+    fd.append( "units", this.$units.val() )
+    fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() )
+    fd.append( "_csrf", $("[name=_csrf]").val())
+    return fd
+	},
+	
+	success: function(){
+	  this.animating = false
+    this.parent.useFloorplan(media)
 	},
 
 })
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index a803f12..6b204e5 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -33,6 +33,9 @@ var BlueprintView = View.extend({
 	
 	hideExtras: function(){
 	},
+	
+	useFloorplan: function(media){
+	},
 
 	pickWall: function(wall, pos){
 	},
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index cff1d78..e15e188 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({
 	photo: {
 		type: String,
 	},
+	media: mongoose.Schema.Types.Mixed,
 	rooms: [mongoose.Schema.Types.Mixed],
 	startPosition: mongoose.Schema.Types.Mixed,
 	viewHeight: { type: Number },
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 308b4c8..3e0c097 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -99,8 +99,8 @@ body {
         <br><br>
 
         <div class="setting number">
-          <label for="wall-length">length</label>
-          <input type="text" class="units" name="wall-length" id="wall-length">
+          <label for="blueprint-dimensions">length</label>
+          <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
           <select id="blueprint-units" name="blueprint-units">
             <option value="ft">feet</option>
             <option value="m">meters</option>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 136bd4d..a0222b5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -91,6 +91,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui/ortho.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/line.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/eraser.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
-- 
cgit v1.2.3-70-g09d2


From f74635f1d28d3450d7c4ddb9869685dc20019f3a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 12 Aug 2015 19:22:06 -0400
Subject: store blueprint scale on server

---
 .../javascripts/ui/blueprint/BlueprintScaler.js      | 17 +++++++++++------
 public/assets/javascripts/ui/lib/FormView.js         |  2 +-
 server/index.js                                      |  1 +
 server/lib/api/media.js                              | 16 ++++++++++++++++
 views/controls/blueprint/editor.ejs                  | 20 +++++++++++---------
 5 files changed, 40 insertions(+), 16 deletions(-)

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index addf9a9..c393cfb 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -2,16 +2,17 @@
 var BlueprintScaler = ModalFormView.extend({
 	el: ".blueprintScaler",
 	
-	method: "/api/media/scale",
+	action: "/api/media/scale",
 	
 	events: {
     "change [name=blueprint-dimensions]": "changeDimensions",
     "change [name=blueprint-units]": "changeUnits",
     "click .uploadNewBlueprint": "showBlueprintUpload",
-    "click #saveBlueprint": "save",
 	},
 	
-	initialize: function(){
+	initialize: function(opt){
+	  this.parent = opt.parent
+	  
     this.$blueprintMap = this.$("#blueprintMap")
     this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
     this.$dimensions = this.$("[name=blueprint-dimensions]")
@@ -46,8 +47,10 @@ var BlueprintScaler = ModalFormView.extend({
 	pick: function(media){
 	  this.media = media
     
-    if (!! media.scale) {
+    if (!! media.units) {
       this.parent.useFloorplan(media)
+      this.hide()
+      return
     }
 
     this.floorplan.load({ media: media, keepImage: true })
@@ -115,13 +118,14 @@ var BlueprintScaler = ModalFormView.extend({
 	  if (this.lineTool.line.length !== 2) return 0
 	  var line = this.lineTool.line
 	  return dist( line[0].a, line[0].b, line[1].a, line[1].b )
-	}
+	},
 
 	validate: function(){
 	  var val = this.$dimensions.unitVal()
 	  var errors = []
 	  if (! this.lineLength()) {
 	    errors.push("no line")
+      this.$dimensions.val("")
 	    alert("Please click two corners of a wall and then specify how long it is in feet or meters.")
 	  }
 	  else if (val == 0) {
@@ -144,7 +148,8 @@ var BlueprintScaler = ModalFormView.extend({
 	
 	success: function(){
 	  this.animating = false
-    this.parent.useFloorplan(media)
+    this.parent.useFloorplan(this.media)
+    this.hide()
 	},
 
 })
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index f5845e7..33effc8 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -63,7 +63,7 @@ var FormView = View.extend({
   save: function(e, successCallback, errorCallback){
     e && e.preventDefault()
 
-    this.$errors.hide().css("opacity", 0.0);
+    this.$errors && this.$errors.hide().css("opacity", 0.0);
     
     if (this.validate) {
       var errors = this.validate()
diff --git a/server/index.js b/server/index.js
index db9b051..0028888 100644
--- a/server/index.js
+++ b/server/index.js
@@ -156,6 +156,7 @@ site.route = function () {
 	app.get('/api/media/user', middleware.ensureAuthenticated, api.media.user)
 	app.post('/api/media/new', middleware.ensureAuthenticated, api.media.create)
 	app.post('/api/media/upload', middleware.ensureAuthenticated, api.media.upload)
+	app.post('/api/media/scale',  middleware.ensureAuthenticated, api.media.scale)
 	app.delete('/api/media/destroy', middleware.ensureAuthenticated, api.media.destroy)
 
 	app.get('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.show)
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 85cbdd6..68e012c 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -65,6 +65,22 @@ var media = {
 		}
 	},
 	
+	scale: function(req, res){
+	  var _id = req.body._id
+		var data = util.cleanQuery(req.body)
+    if (! _id) { return res.json({ error: 404 }) }
+	  Media.findOne({ _id: _id }, function(err, doc){
+			if (! doc) { return res.json({ error: 404 }) }
+			if (String(doc.user_id) !== String(req.user._id)) { return res.json({ error: 404 }) }
+			doc.scale = data.scale
+			doc.units = data.units
+			doc.save(function(err, rec){
+				if (err || ! rec) { return res.json({ error: err }) }
+				res.json(rec)
+			})
+		})
+	},
+	
 	destroy: function(req, res){
 		var _id = util.sanitize(req.body._id)
 		if (! _id || ! _id.length) {
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 3e0c097..77c958a 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -98,15 +98,17 @@ body {
         You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
         <br><br>
 
-        <div class="setting number">
-          <label for="blueprint-dimensions">length</label>
-          <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
-          <select id="blueprint-units" name="blueprint-units">
-            <option value="ft">feet</option>
-            <option value="m">meters</option>
-          </select>
-        </div>
-        <button id="saveBlueprint">Save</button>
+        <form>
+          <div class="setting number">
+            <label for="blueprint-dimensions">length</label>
+            <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
+            <select id="blueprint-units" name="blueprint-units">
+              <option value="ft">feet</option>
+              <option value="m">meters</option>
+            </select>
+          </div>
+          <button id="saveBlueprint">Save</button>
+        </form>
       </div>
 
       <div id="blueprintMap">
-- 
cgit v1.2.3-70-g09d2


From 6b3d07293bf674703b286cb396049fb8e83b86b7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 14 Aug 2015 16:37:39 -0400
Subject: AnimatedView

---
 .../javascripts/ui/blueprint/BlueprintScaler.js    | 29 ++++-----------
 public/assets/javascripts/ui/lib/AnimatedView.js   | 31 ++++++++++++++++
 views/blueprint.ejs                                | 33 +++++++++++++++++
 views/builder.ejs                                  | 16 --------
 views/controls/blueprint/editor.ejs                | 43 ++++++++++------------
 views/modal.ejs                                    |  1 -
 views/partials/scripts.ejs                         |  1 +
 7 files changed, 93 insertions(+), 61 deletions(-)
 create mode 100644 public/assets/javascripts/ui/lib/AnimatedView.js
 create mode 100644 views/blueprint.ejs

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index c393cfb..741f4fb 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -1,5 +1,5 @@
 
-var BlueprintScaler = ModalFormView.extend({
+var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
 	el: ".blueprintScaler",
 	
 	action: "/api/media/scale",
@@ -20,7 +20,7 @@ var BlueprintScaler = ModalFormView.extend({
     this.$units = this.$("[name=blueprint-units]")
     this.$save = this.$("#saveBlueprint")
 
-    this.map = map = new Map ({
+    this.map = new Map ({
       type: "ortho",
       el: this.$blueprintMap.get(0),
       width: window.innerWidth,
@@ -30,14 +30,12 @@ var BlueprintScaler = ModalFormView.extend({
       zoom_max: 1,
     })
     this.lineTool = new LineTool
-    map.ui.add_tool("line", this.lineTool)
-    map.ui.set_tool("line")
+    this.map.ui.add_tool("line", this.lineTool)
+    this.map.ui.set_tool("line")
     
     scene = scene || { camera: { x: 0, y: 0, z: 0 } }
     
     this.floorplan = new MX.Image ()
-    
-    this.animating = false
 	},
 	
 	showBlueprintUpload: function(){
@@ -50,27 +48,16 @@ var BlueprintScaler = ModalFormView.extend({
     if (!! media.units) {
       this.parent.useFloorplan(media)
       this.hide()
+      this.stopAnimating()
       return
     }
 
     this.floorplan.load({ media: media, keepImage: true })
 
-    if (! this.animating) {
-      this.animating = true
-      this.animate()
-    }
+    this.startAnimating()
 	},
 	
-	animate: function(t){
-    requestAnimationFrame(this.animate.bind(this))
-    
-    if (! this.animating) return
-
-    var dt = t - this.last_t
-    this.last_t = t
-
-    if (! t) return
-
+	animate: function(t, dt){
     this.map.update(t)
 
     this.map.draw.ctx.save()
@@ -147,7 +134,7 @@ var BlueprintScaler = ModalFormView.extend({
 	},
 	
 	success: function(){
-	  this.animating = false
+    this.stopAnimating()
     this.parent.useFloorplan(this.media)
     this.hide()
 	},
diff --git a/public/assets/javascripts/ui/lib/AnimatedView.js b/public/assets/javascripts/ui/lib/AnimatedView.js
new file mode 100644
index 0000000..3c50b0a
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/AnimatedView.js
@@ -0,0 +1,31 @@
+var AnimatedView = View.extend({
+
+  _animating: false,
+  last_t: 0,
+  
+  startAnimating: function(){
+    if (this._animating) return
+    this._animating = true
+    this._animate()
+  },
+
+	stopAnimating: function(){
+	  this._animating = false
+	},
+
+	_animate: function(t){
+	  if (! this._animating) return
+
+    requestAnimationFrame(this._animate.bind(this))
+    
+    var dt = t - this.last_t
+    this.last_t = t
+
+    if (! t) return
+    
+    this.animate(t, dt)
+	},
+	
+	animate: function(t, dt){},
+
+})
\ No newline at end of file
diff --git a/views/blueprint.ejs b/views/blueprint.ejs
new file mode 100644
index 0000000..371d66f
--- /dev/null
+++ b/views/blueprint.ejs
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<head>
+	<title>VValls</title>
+	[[ include partials/meta ]]
+</head>
+<body class="editing loading">
+
+	<div id="scene"></div>
+
+	<div class="rapper">
+		[[ include partials/header ]]
+		
+		<div id="builderView">
+			[[ include controls/builder/info ]]
+			[[ include controls/builder/toolbar ]]
+			[[ include controls/builder/settings ]]
+      [[ include controls/blueprint/editor ]]
+		</div>
+
+		<div id="hud">
+			<div id="map" style="display: block">
+			</div>
+		</div>
+	</div>
+
+	[[ include partials/confirm-modal ]]	
+	[[ include projects/layouts-modal ]]	
+	[[ include partials/sign-in ]]
+
+</body>
+[[ include partials/scripts ]]
+</html>
diff --git a/views/builder.ejs b/views/builder.ejs
index 0ba4238..6a31e22 100644
--- a/views/builder.ejs
+++ b/views/builder.ejs
@@ -17,22 +17,6 @@
 			[[ include controls/builder/settings ]]
 		</div>
 
-	<!--
-		<div id="minimap" class="vvbox">
-			<span class="el"></span>
-		</div>
-
-		<select id="palette">
-			<option>colors</option>
-			<option>redblue</option>
-			<option>gray</option>
-			<option selected>bone</option>
-			<option>alpha</option>
-			<option>white</option>
-			<option>black</option>
-		</select>
-	-->
-
 		<div id="hud">
 			<div id="map" style="display: block">
 			</div>
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 77c958a..e18f501 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -67,7 +67,7 @@ body {
   </div>
 </div>
 
-<div class="mediaDrawer fixed animate active blueprintEditor">
+<div class="mediaDrawer fixed animate active blueprintScaler">
   <div class="box">
 
     <div class="blueprintUpload">
@@ -90,30 +90,27 @@ body {
       </div>
     </div>
     
-    <div class="blueprintScaler">
-      <div class="blueprintInfo vvbox">
-        Please tell us the scale of your blueprint.
-        Click two corners of a wall, and then enter how long the wall is.
-        <br><br>
-        You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
-        <br><br>
+    <div class="blueprintInfo vvbox">
+      Please tell us the scale of your blueprint.
+      Click two corners of a wall, and then enter how long the wall is.
+      <br><br>
+      You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
+      <br><br>
 
-        <form>
-          <div class="setting number">
-            <label for="blueprint-dimensions">length</label>
-            <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
-            <select id="blueprint-units" name="blueprint-units">
-              <option value="ft">feet</option>
-              <option value="m">meters</option>
-            </select>
-          </div>
-          <button id="saveBlueprint">Save</button>
-        </form>
-      </div>
+      <form>
+        <div class="setting number">
+          <label for="blueprint-dimensions">length</label>
+          <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
+          <select id="blueprint-units" name="blueprint-units">
+            <option value="ft">feet</option>
+            <option value="m">meters</option>
+          </select>
+        </div>
+        <button id="saveBlueprint">Save</button>
+      </form>
+    </div>
 
-      <div id="blueprintMap">
-      </div>
-  
+    <div id="blueprintMap">
     </div>
     
   </div>
diff --git a/views/modal.ejs b/views/modal.ejs
index 775ba88..dfc5573 100644
--- a/views/modal.ejs
+++ b/views/modal.ejs
@@ -10,7 +10,6 @@
 
 	<div style="height: 70%; clear: both;" id="content"></div>
 
-	[[ include controls/blueprint/editor ]]
 	[[ include partials/confirm-modal ]]
 	[[ include partials/sign-in ]]	
 	[[ include projects/layouts-modal ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index a0222b5..e0024a4 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -102,6 +102,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/lib/ModalView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/FormView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/UploadView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/AnimatedView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/AlertModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/ConfirmModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/ErrorModal.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 599b43df07f092b35d25e7adac11db3c3b3d9c76 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 17 Aug 2015 12:23:39 -0400
Subject: BlueprintEditor

---
 public/assets/javascripts/ui/_router.js            |   7 +-
 .../javascripts/ui/blueprint/BlueprintEditor.js    | 155 +++++++++++++++++++++
 .../javascripts/ui/blueprint/BlueprintView.js      |  18 +--
 server/index.js                                    |   3 +
 server/lib/views/index.js                          |   4 +
 views/blueprint.ejs                                |   1 +
 views/controls/blueprint/editor.ejs                |  53 -------
 views/controls/blueprint/scaler.ejs                |  48 +++++++
 views/partials/scripts.ejs                         |   1 +
 9 files changed, 227 insertions(+), 63 deletions(-)
 create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js
 create mode 100644 views/controls/blueprint/scaler.ejs

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 857377c..177e86f 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -38,6 +38,9 @@ var SiteRouter = Router.extend({
 		"/layout":              'layoutPicker',
 		"/layout/:name":        'layoutEditor',
 
+		"/blueprint":           'blueprintEditor',
+		"/blueprint/:name":     'blueprintEditor',
+
 		"/project":             'projectPicker',
 		"/project/new":         'newProject',
 		"/project/new/:layout": 'projectNewWithLayout',
@@ -160,13 +163,13 @@ var SiteRouter = Router.extend({
 		this.readerView.load(name)
 	},
 	
-	blueprintEditor: function(e){
+	blueprintEditor: function(e, name){
 	  environment.init = environment.minimal
 	  app.launch()
 	  if (app.unsupported) return
 
 	  this.blueprintView = app.controller = new BlueprintView ()
-	  this.blueprintView.load()
+	  this.blueprintView.load(name)
 	},
 
 	signup: function(e){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
new file mode 100644
index 0000000..c781495
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -0,0 +1,155 @@
+
+var wall_height = 180
+var shapes = new ShapeList
+var last_point = new vec2 (0,0)
+
+var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
+
+  initialize: function(opt){
+    this.parent = opt.parent
+  
+    map = new Map ({
+      type: "ortho",
+      el: document.querySelector("#orthographic"),
+      width: window.innerWidth/2,
+      height: window.innerHeight,
+      zoom: -2,
+      zoom_min: -6.2,
+      zoom_max: 1,
+    })
+    map.ui.add_tool("arrow", new ArrowTool)
+    map.ui.add_tool("polyline", new PolylineTool)
+    map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+    map.ui.add_tool("eraser", new EraserTool)
+    map.ui.add_tool("position", new PositionTool)
+    map.ui.placing = false
+
+/*
+    $(window).resize(function(){
+      scene.width = window.innerWidth/2
+      scene.height = window.innerHeight
+      map.canvas.width = map.dimensions.a = window.innerWidth/2
+      map.canvas.height = map.dimensions.b = window.innerHeight/2
+    })
+*/
+
+    var PerspectiveToolbar = new Toolbar (".persp-hud")
+    PerspectiveToolbar.add("orbit-mode", function(){
+      controls.toggle(true)
+      movements.lock()
+    })
+    PerspectiveToolbar.add("keyboard-mode", function(){
+      controls.toggle(false)
+      movements.unlock()
+      movements.gravity(true)
+      cam.rotationX = 0
+      cam.rotationY = -cam.rotationY
+      cam.x = 0
+      cam.y = viewHeight + 100
+      cam.z = 0
+    })
+
+    var OrthographicToolbar = new Toolbar (".ortho-hud")
+    OrthographicToolbar.add("arrow-mode", function(){
+      map.ui.set_tool("arrow")
+    })
+    OrthographicToolbar.add("polyline-mode", function(){
+      map.ui.set_tool("polyline")
+    })
+    OrthographicToolbar.add("ortho-polyline-mode", function(){
+      map.ui.set_tool("ortho-polyline")
+    })
+    OrthographicToolbar.add("eraser-mode", function(){
+      map.ui.set_tool("eraser")
+    })
+    OrthographicToolbar.pick("ortho-polyline-mode")
+  },
+  
+  animate: function(t, dt){
+    map.update(t)
+
+    movements.update(dt)
+    controls.update()
+    scene.update()
+
+    map.draw.ctx.save()
+    map.draw.translate()
+
+    floorplan.draw(map.draw.ctx, true)
+
+    map.draw.coords()
+
+    if (shapes.workline) {
+      shapes.workline.draw(map.draw.ctx)
+      if (map.ui.placing && last_point) {
+        shapes.workline.draw_line( map.draw.ctx, last_point )
+      }
+    }
+
+    shapes.forEach(function(shape){
+      shape.draw(map.draw.ctx)
+    })
+
+    map.draw.ctx.strokeStyle = "#f00";
+    map.draw.x_at(0,0)
+    map.draw.mouse(map.ui.mouse.cursor)
+    map.draw.camera(scene.camera)
+
+    map.draw.ctx.restore()
+  },
+
+})
+
+function build () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.radius = 20
+
+  viewHeight = 100
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
+
+  floorplan = new MX.Image({
+    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  scene.add(floorplan)
+  
+  // recenter perspective view by rightclicking map
+  floorplan.el.addEventListener("contextmenu", function(e){
+    e.preventDefault()
+    var offset = offsetFromPoint(e, this)
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+    controls.opt.center.x = -x
+    controls.opt.center.y = 0
+    controls.opt.center.z = -z
+  }, true)
+
+	scene.update()
+
+	controls = new MX.OrbitCamera({
+	  el: scene.el,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 6b204e5..0a06fda 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -1,7 +1,9 @@
 
 var BlueprintView = View.extend({
 	el: "#blueprintView",
-	
+
+	action: "/api/layout/",
+
 	events: {
 	},
 	
@@ -16,14 +18,14 @@ var BlueprintView = View.extend({
 	},
 
 	load: function(name){
-// 		if (! name || name == "new") {
+		if (! name || name == "new") {
 // 			this.ready({ isNew: true, _id: "new", name: "" })
-// 			return
-// 		}
-// 		
-// 		name = sanitize(name)
-// 		
-// 		$.get(this.action + name, this.ready.bind(this))
+			return
+		}
+		
+		name = sanitize(name)
+		
+		$.get(this.action + name, this.ready.bind(this))
 	},
 	
 	ready: function(data){
diff --git a/server/index.js b/server/index.js
index 0028888..078db8e 100644
--- a/server/index.js
+++ b/server/index.js
@@ -127,6 +127,9 @@ site.route = function () {
 	app.get('/layout', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.modal)
 	app.get('/layout/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.builder)
 
+	app.get('/blueprint', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint)
+	app.get('/blueprint/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint)
+
 	app.get('/join/:nonce', middleware.ensureAuthenticated, api.collaborator.join)
 	app.get('/api/collaborator/:slug/index', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.index)
 	app.post('/api/collaborator/:slug/create', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.create)
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index 5241ddb..523f628 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -84,6 +84,10 @@ var views = module.exports = {
 		res.render('builder')
 	},
 
+	blueprint: function (req, res) {
+		res.render('blueprint')
+	},
+
 	modal: function (req, res) {
 		res.render('modal');
 	},
diff --git a/views/blueprint.ejs b/views/blueprint.ejs
index 371d66f..7e13318 100644
--- a/views/blueprint.ejs
+++ b/views/blueprint.ejs
@@ -16,6 +16,7 @@
 			[[ include controls/builder/toolbar ]]
 			[[ include controls/builder/settings ]]
       [[ include controls/blueprint/editor ]]
+      [[ include controls/blueprint/scaler ]]
 		</div>
 
 		<div id="hud">
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index e18f501..5334f85 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -1,8 +1,4 @@
 <style type="text/css">
-html,body{width:100%;height:100%;margin:0;padding:0;}
-body {
-	overflow: hidden;
-}
 #perspective,
 #perspective .mx-scene {
 	position: absolute;
@@ -11,7 +7,6 @@ body {
 	-webkit-transform: translateZ(0);
 	transform: translateZ(0);
 }
-
 #orthographic {
 	position: absolute;
 	left:50%;
@@ -67,51 +62,3 @@ body {
   </div>
 </div>
 
-<div class="mediaDrawer fixed animate active blueprintScaler">
-  <div class="box">
-
-    <div class="blueprintUpload">
-      <h2>Upload your Blueprint</h2>
-      <p>
-        Upload an image which you will trace to make a floor plan.
-        Images should be at least 1000x1000.
-      </p>
-      <input type="hidden" name="_csrf" value="[[- token ]]">
-      <input type="text" class="url" placeholder="Enter an image URL or...">
-      <div class="wallpaperUpload toolButton">
-        <form>
-          <span class="ion-ios-upload-outline upload-icon"></span>
-          <label>Upload a File</label>
-          <input type="file" accept="image/*" multiple>
-        </form>
-      </div>
-      <div class="blueprints">
-        <h5>Your uploaded blueprints</h5>
-      </div>
-    </div>
-    
-    <div class="blueprintInfo vvbox">
-      Please tell us the scale of your blueprint.
-      Click two corners of a wall, and then enter how long the wall is.
-      <br><br>
-      You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
-      <br><br>
-
-      <form>
-        <div class="setting number">
-          <label for="blueprint-dimensions">length</label>
-          <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
-          <select id="blueprint-units" name="blueprint-units">
-            <option value="ft">feet</option>
-            <option value="m">meters</option>
-          </select>
-        </div>
-        <button id="saveBlueprint">Save</button>
-      </form>
-    </div>
-
-    <div id="blueprintMap">
-    </div>
-    
-  </div>
-</div>
diff --git a/views/controls/blueprint/scaler.ejs b/views/controls/blueprint/scaler.ejs
new file mode 100644
index 0000000..972b82a
--- /dev/null
+++ b/views/controls/blueprint/scaler.ejs
@@ -0,0 +1,48 @@
+<div class="mediaDrawer fixed animate active blueprintScaler">
+  <div class="box">
+
+    <div class="blueprintUpload">
+      <h2>Upload your Blueprint</h2>
+      <p>
+        Upload an image which you will trace to make a floor plan.
+        Images should be at least 1000x1000.
+      </p>
+      <input type="hidden" name="_csrf" value="[[- token ]]">
+      <input type="text" class="url" placeholder="Enter an image URL or...">
+      <div class="wallpaperUpload toolButton">
+        <form>
+          <span class="ion-ios-upload-outline upload-icon"></span>
+          <label>Upload a File</label>
+          <input type="file" accept="image/*" multiple>
+        </form>
+      </div>
+      <div class="blueprints">
+        <h5>Your uploaded blueprints</h5>
+      </div>
+    </div>
+    
+    <div class="blueprintInfo vvbox">
+      Please tell us the scale of your blueprint.
+      Click two corners of a wall, and then enter how long the wall is.
+      <br><br>
+      You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
+      <br><br>
+
+      <form>
+        <div class="setting number">
+          <label for="blueprint-dimensions">length</label>
+          <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
+          <select id="blueprint-units" name="blueprint-units">
+            <option value="ft">feet</option>
+            <option value="m">meters</option>
+          </select>
+        </div>
+        <button id="saveBlueprint">Save</button>
+      </form>
+    </div>
+
+    <div id="blueprintMap">
+    </div>
+    
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index e0024a4..2c3d5ac 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -130,6 +130,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script>
 
-- 
cgit v1.2.3-70-g09d2


From 3c36de54b57422f34c367934fdf62873b881fa20 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 17 Aug 2015 16:27:40 -0400
Subject: integrate ortho3 stuff into blueprint views

---
 .../assets/javascripts/mx/primitives/mx.image.js   |  14 +-
 public/assets/javascripts/ui/_router.js            |   4 +-
 .../javascripts/ui/blueprint/BlueprintEditor.js    | 148 ++++++++-------------
 .../javascripts/ui/blueprint/BlueprintScaler.js    |   6 +-
 .../javascripts/ui/blueprint/BlueprintToolbar.js   |  69 ++++++++++
 .../javascripts/ui/blueprint/BlueprintUpload.js    | 128 ------------------
 .../javascripts/ui/blueprint/BlueprintUploader.js  | 126 ++++++++++++++++++
 .../javascripts/ui/blueprint/BlueprintView.js      |  30 ++++-
 public/assets/stylesheets/app.css                  |  29 ++--
 views/blueprint.ejs                                |   2 +-
 views/controls/blueprint/editor.ejs                |  28 ----
 views/controls/blueprint/scaler.ejs                |   2 +-
 views/controls/blueprint/toolbar.ejs               |  35 +++++
 views/partials/scripts.ejs                         |   7 +-
 14 files changed, 349 insertions(+), 279 deletions(-)
 create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
 delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUpload.js
 create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUploader.js
 create mode 100644 views/controls/blueprint/toolbar.ejs

(limited to 'views/controls/blueprint/editor.ejs')

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 33b1373..ce99592 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -48,10 +48,16 @@ MX.Image = MX.Object3D.extend({
         layer.image = image
       }
     }
-    
-    if (ops.src) image.src = ops.src
-    else if (ops.media) image.src = ops.media.url
-    else if (ops.url) image.src = ops.url
+
+    if (ops.src) {
+      image.src = ops.src
+    }
+    else if (ops.media) {
+      image.src = ops.media.url
+    }
+    else if (ops.url) {
+      image.src = ops.url
+    }
   },
 
   draw: function(ctx, recenter){
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 177e86f..e5e46e5 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -92,7 +92,9 @@ var SiteRouter = Router.extend({
       })
 		}
 		
-		$("body").removeClass("loading")
+		setTimeout(function(){
+		  $("body").removeClass("loading")
+		}, 200)
 	},
 
 	layoutEditor: function(e, name){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
index c781495..545de7b 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -7,22 +7,6 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
 
   initialize: function(opt){
     this.parent = opt.parent
-  
-    map = new Map ({
-      type: "ortho",
-      el: document.querySelector("#orthographic"),
-      width: window.innerWidth/2,
-      height: window.innerHeight,
-      zoom: -2,
-      zoom_min: -6.2,
-      zoom_max: 1,
-    })
-    map.ui.add_tool("arrow", new ArrowTool)
-    map.ui.add_tool("polyline", new PolylineTool)
-    map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
-    map.ui.add_tool("eraser", new EraserTool)
-    map.ui.add_tool("position", new PositionTool)
-    map.ui.placing = false
 
 /*
     $(window).resize(function(){
@@ -33,36 +17,62 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
     })
 */
 
-    var PerspectiveToolbar = new Toolbar (".persp-hud")
-    PerspectiveToolbar.add("orbit-mode", function(){
-      controls.toggle(true)
-      movements.lock()
-    })
-    PerspectiveToolbar.add("keyboard-mode", function(){
-      controls.toggle(false)
-      movements.unlock()
-      movements.gravity(true)
-      cam.rotationX = 0
-      cam.rotationY = -cam.rotationY
-      cam.x = 0
-      cam.y = viewHeight + 100
-      cam.z = 0
-    })
+    scene = new MX.Scene().addTo("#perspective")
+    scene.camera.radius = 20
+    cam = scene.camera
 
-    var OrthographicToolbar = new Toolbar (".ortho-hud")
-    OrthographicToolbar.add("arrow-mode", function(){
-      map.ui.set_tool("arrow")
+    scene.width = window.innerWidth/2
+    scene.height = window.innerHeight
+    scene.perspective = window.innerHeight
+  
+    movements = new MX.Movements(cam, viewHeight)
+    movements.init()
+    movements.lock()
+
+    app.on("move", function(pos){
+      cam.x = pos.x
+      cam.y = pos.y
+      cam.z = pos.z
     })
-    OrthographicToolbar.add("polyline-mode", function(){
-      map.ui.set_tool("polyline")
+
+    var floorplan = this.floorplan = new MX.Image({
+      backface: true,
     })
-    OrthographicToolbar.add("ortho-polyline-mode", function(){
-      map.ui.set_tool("ortho-polyline")
+    scene.add(this.floorplan)
+  
+    // recenter perspective view by rightclicking map
+    this.floorplan.el.addEventListener("contextmenu", function(e){
+      e.preventDefault()
+      var offset = offsetFromPoint(e, this)
+      var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+      var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+      controls.opt.center.x = -x
+      controls.opt.center.y = 0
+      controls.opt.center.z = -z
+    }, true)
+
+    scene.update()
+
+    controls = new MX.OrbitCamera({
+      el: scene.el,
+      radius: 3000,
+      radiusRange: [ 10, 10000 ],
+      rotationX: PI/4,
+      rotationY: PI/2,
     })
-    OrthographicToolbar.add("eraser-mode", function(){
-      map.ui.set_tool("eraser")
+    controls.init()
+  },
+  
+  loadFloorplan: function(media){
+    console.log(media)
+    this.floorplan.load({
+      media: media,
+      keepImage: true,
+      rotationX: -PI/2,
+      rotationY: PI,
+      scale: media.scale,
     })
-    OrthographicToolbar.pick("ortho-polyline-mode")
+    this.startAnimating()
   },
   
   animate: function(t, dt){
@@ -75,7 +85,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
     map.draw.ctx.save()
     map.draw.translate()
 
-    floorplan.draw(map.draw.ctx, true)
+    this.floorplan.draw(map.draw.ctx, true)
 
     map.draw.coords()
 
@@ -99,57 +109,3 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
   },
 
 })
-
-function build () {
-	scene = new MX.Scene().addTo("#perspective")
-	scene.camera.radius = 20
-
-  viewHeight = 100
-
-	scene.width = window.innerWidth/2
-	scene.height = window.innerHeight
-	scene.perspective = window.innerHeight
-	
-	cam = scene.camera
-	movements = new MX.Movements(cam, viewHeight)
-	movements.init()
-	movements.lock()
-	movements.velocity(8)
-	app.on("move", function(pos){
-	  cam.x = pos.x
-	  cam.y = pos.y
-	  cam.z = pos.z
-	})
-
-  floorplan = new MX.Image({
-    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
-    keepImage: true,
-    rotationX: -PI/2,
-    rotationY: PI,
-  })
-  scene.add(floorplan)
-  
-  // recenter perspective view by rightclicking map
-  floorplan.el.addEventListener("contextmenu", function(e){
-    e.preventDefault()
-    var offset = offsetFromPoint(e, this)
-    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
-    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
-    controls.opt.center.x = -x
-    controls.opt.center.y = 0
-    controls.opt.center.z = -z
-  }, true)
-
-	scene.update()
-
-	controls = new MX.OrbitCamera({
-	  el: scene.el,
-	  radius: 3000,
-	  radiusRange: [ 10, 10000 ],
-	  rotationX: PI/4,
-	  rotationY: PI/2,
-	})
-	controls.init()
-
-	animate(0)
-}
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index 741f4fb..ff26c8e 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -7,7 +7,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
 	events: {
     "change [name=blueprint-dimensions]": "changeDimensions",
     "change [name=blueprint-units]": "changeUnits",
-    "click .uploadNewBlueprint": "showBlueprintUpload",
+    "click .uploadNewBlueprint": "showUploader",
 	},
 	
 	initialize: function(opt){
@@ -38,8 +38,8 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
     this.floorplan = new MX.Image ()
 	},
 	
-	showBlueprintUpload: function(){
-	  this.parent.blueprintUpload.show()
+	showUploader: function(){
+	  this.parent.uploader.show()
 	},
 	
 	pick: function(media){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
new file mode 100644
index 0000000..69288f6
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js
@@ -0,0 +1,69 @@
+var BlueprintToolbar = View.extend({
+
+  el: "#blueprintToolbar",
+
+  events: {
+    "click [data-role=toggle-orbit-mode]": 'toggleOrbitMode',
+    "click [data-role=arrow-mode]": 'arrowMode',
+    "click [data-role=polyline-mode]": 'polylineMode',
+    "click [data-role=ortho-polyline-mode]": 'orthoPolylineMode',
+    "click [data-role=eraser-mode]": 'eraserMode',
+  },
+
+  initialize: function(opt){
+    this.parent = opt.parent
+    
+    this.$modes = this.$('.mode')
+    this.$arrowMode = this.$('[data-role=arrow-mode]')
+    this.$polylineMode = this.$('[data-role=polyline-mode]')
+    this.$orthoPolylineMode = this.$('[data-role=ortho-polyline-mode]')
+    this.$eraserMode = this.$('[data-role=eraser-mode]')
+    
+    this.orthoPolylineMode()
+  },
+  
+  orbiting: true,
+  toggleOrbitMode: function(){
+    this.orbiting = ! this.orbiting
+    if (this.orbiting) {
+      controls.toggle(true)
+      movements.lock()
+    }
+    else {
+      controls.toggle(false)
+      movements.unlock()
+      movements.gravity(true)
+      cam.rotationX = 0
+      cam.rotationY = -cam.rotationY
+      cam.x = 0
+      cam.y = viewHeight
+      cam.z = 0
+    }
+  },
+  
+  setActiveMode: function( $el ) {
+    this.$modes.removeClass('active')
+    $el.addClass('active')
+  },
+  
+  arrowMode: function(){
+    this.setActiveMode( this.$arrowMode )
+    this.parent.map.ui.set_tool("arrow")
+  },
+  
+  polylineMode: function(){
+    this.setActiveMode( this.$polylineMode )
+    this.parent.map.ui.set_tool("polyline")
+  },
+  
+  orthoPolylineMode: function(){
+    this.setActiveMode( this.$orthoPolylineMode )
+    this.parent.map.ui.set_tool("ortho-polyline")
+  },
+  
+  eraserMode: function(){
+    this.setActiveMode( this.$eraserMode )
+    this.parent.map.ui.set_tool("eraser")
+  },
+
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
deleted file mode 100644
index 498575a..0000000
--- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
+++ /dev/null
@@ -1,128 +0,0 @@
-
-var BlueprintUpload = UploadView.extend({
-	el: ".blueprintUpload",
-	
-	mediaTag: "blueprint",
-	createAction: "/api/media/new",
-	uploadAction: "/api/media/upload",
-	listAction: "/api/media/user",
-	destroyAction: "/api/media/destroy",
-
-	events: {
-		"mousedown": 'stopPropagation',
-    "change .url": "enterUrl",
-    "keydown .url": "enterSetUrl",
-    
-    "click .blueprint": "pick",
-    "click .remove": "destroy",
-  },
-	
-	initialize: function(opt){
-	  this.parent = opt.parent
-	  this.__super__.initialize.call(this)
-
-    this.$url = this.$(".url")
-    this.$blueprints = this.$(".blueprints")
-
-    this.load()
-	},
-	
-  loaded: false,
-	load: function(){
-		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
-	},
-
-	populate: function(data){
-		this.loaded = true
-		if (data && data.length) {
-		  this.$blueprints.show()
-      data.forEach(this.append.bind(this))
-      this.hide()
-      this.parent.blueprintScaler.pick(data[0])
-		}
-		else {
-		  this.show()
-		}
-	},
-	
-	pick: function(e){
-	  var $el = $(e.currentTarget)
-	  var media = $el.data("media")
-	  this.hide()
-	  this.parent.blueprintScaler.pick(media)
-	},
-  
-	destroy: function(e){
-	  e.stopPropagation()
-	  var $el = $(e.currentTarget)
-	  var _id = $el.closest(".blueprint").data("id")
-    $el.remove()
-		$.ajax({
-			type: "delete",
-			url: this.destroyAction,
-			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
-		}).complete(function(){
-		})
-	},
-	
-	show: function(){
-    this.toggle(true)
-	},
-	hide: function(){
-		this.toggle(false)
-	},
-	toggle: function (state) {
-    this.$el.toggleClass("active", state)
-	},
-
-	addUrl: function (url){
-		Parser.loadImage(url, function(media){
-			if (! media) return
-			media._csrf = $("[name=_csrf]").val()
-			media.tag = this.mediaTag
-			
-			var request = $.ajax({
-				type: "post",
-				url: this.createAction,
-				data: media,
-			})
-			request.done(this.add.bind(this))
-			
-		}.bind(this))
-	},
-  enterUrl: function(){
-  	var url = this.$url.sanitize()
-  	this.addUrl(url)
-  	this.$url.val("")
-  },
-	enterSetUrl: function (e) {
-		e.stopPropagation()
-		if (e.keyCode == 13) {
-			setTimeout(this.enterUrl.bind(this), 100)
-		}
-	},
-	
-	add: function(media){
-    this.$blueprints.show()
-	  this.append(media)
-	  this.hide()
-	  this.parent.blueprintScaler.pick(media)
-	},
-
-	append: function(media){
-	  var $el = $("<span>")
-	  var img = new Image ()
-	  img.src = media.url
-	  var remove = document.createElement("span")
-	  remove.className = "remove"
-	  remove.innerHTML = "<span>x</span>"
-	  
-	  $el.data("id", media._id)
-	  $el.data("media", media)
-	  $el.append(img)
-	  $el.append(remove)
-	  $el.addClass("blueprint")
-	  this.$blueprints.append($el)
-	},
-	
-})
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js
new file mode 100644
index 0000000..aeb7d9c
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js
@@ -0,0 +1,126 @@
+
+var BlueprintUploader = UploadView.extend({
+	el: ".blueprintUploader",
+	
+	mediaTag: "blueprint",
+	createAction: "/api/media/new",
+	uploadAction: "/api/media/upload",
+	listAction: "/api/media/user",
+	destroyAction: "/api/media/destroy",
+
+	events: {
+		"mousedown": 'stopPropagation',
+    "change .url": "enterUrl",
+    "keydown .url": "enterSetUrl",
+    
+    "click .blueprint": "pick",
+    "click .remove": "destroy",
+  },
+	
+	initialize: function(opt){
+	  this.parent = opt.parent
+	  this.__super__.initialize.call(this)
+
+    this.$url = this.$(".url")
+    this.$blueprints = this.$(".blueprints")
+	},
+	
+  loaded: false,
+	load: function(){
+		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
+	},
+
+	populate: function(data){
+		this.loaded = true
+		if (data && data.length) {
+		  this.$blueprints.show()
+      data.forEach(this.append.bind(this))
+      this.hide()
+      this.parent.scaler.pick(data[0])
+		}
+		else {
+		  this.show()
+		}
+	},
+	
+	pick: function(e){
+	  var $el = $(e.currentTarget)
+	  var media = $el.data("media")
+	  this.hide()
+	  this.parent.scaler.pick(media)
+	},
+  
+	destroy: function(e){
+	  e.stopPropagation()
+	  var $el = $(e.currentTarget)
+	  var _id = $el.closest(".blueprint").data("id")
+    $el.remove()
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(function(){
+		})
+	},
+	
+	show: function(){
+    this.toggle(true)
+	},
+	hide: function(){
+		this.toggle(false)
+	},
+	toggle: function (state) {
+    this.$el.toggleClass("active", state)
+	},
+
+	addUrl: function (url){
+		Parser.loadImage(url, function(media){
+			if (! media) return
+			media._csrf = $("[name=_csrf]").val()
+			media.tag = this.mediaTag
+			
+			var request = $.ajax({
+				type: "post",
+				url: this.createAction,
+				data: media,
+			})
+			request.done(this.add.bind(this))
+			
+		}.bind(this))
+	},
+  enterUrl: function(){
+  	var url = this.$url.sanitize()
+  	this.addUrl(url)
+  	this.$url.val("")
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.enterUrl.bind(this), 100)
+		}
+	},
+	
+	add: function(media){
+    this.$blueprints.show()
+	  this.append(media)
+	  this.hide()
+	  this.parent.scaler.pick(media)
+	},
+
+	append: function(media){
+	  var $el = $("<span>")
+	  var img = new Image ()
+	  img.src = media.url
+	  var remove = document.createElement("span")
+	  remove.className = "remove"
+	  remove.innerHTML = "<span>x</span>"
+	  
+	  $el.data("id", media._id)
+	  $el.data("media", media)
+	  $el.append(img)
+	  $el.append(remove)
+	  $el.addClass("blueprint")
+	  this.$blueprints.append($el)
+	},
+	
+})
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 0a06fda..cf627d9 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -9,17 +9,20 @@ var BlueprintView = View.extend({
 	
 	initialize: function(){
 // 		this.info = new BuilderInfo ({ parent: this })
-// 		this.toolbar = new BuilderToolbar ({ parent: this })
 // 		this.settings = new BuilderSettings ({ parent: this })
 // 		this.colorControl = new ColorControl ({ parent: this })
 // 		this.cursor = new HelpCursor({ parent: this })
-    this.blueprintUpload = new BlueprintUpload ({ parent: this })
-    this.blueprintScaler = new BlueprintScaler ({ parent: this })
+    this.map = this.buildMap()
+		this.editor = new BlueprintEditor ({ parent: this })
+		this.toolbar = new BlueprintToolbar ({ parent: this })
+    this.uploader = new BlueprintUploader ({ parent: this })
+    this.scaler = new BlueprintScaler ({ parent: this })
 	},
 
 	load: function(name){
 		if (! name || name == "new") {
 // 			this.ready({ isNew: true, _id: "new", name: "" })
+      this.uploader.load()
 			return
 		}
 		
@@ -28,6 +31,26 @@ var BlueprintView = View.extend({
 		$.get(this.action + name, this.ready.bind(this))
 	},
 	
+	buildMap: function(){
+	  // i forget if this has to be global
+    map = new Map ({
+      type: "ortho",
+      el: document.querySelector("#orthographic"),
+      width: window.innerWidth/2,
+      height: window.innerHeight,
+      zoom: -2,
+      zoom_min: -6.2,
+      zoom_max: 1,
+    })
+    map.ui.add_tool("arrow", new ArrowTool)
+    map.ui.add_tool("polyline", new PolylineTool)
+    map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+    map.ui.add_tool("eraser", new EraserTool)
+    map.ui.add_tool("position", new PositionTool)
+    map.ui.placing = false
+    return map
+	},
+	
 	ready: function(data){
 // 		this.settings.load(data)
 // 		this.info.load(data)
@@ -37,6 +60,7 @@ var BlueprintView = View.extend({
 	},
 	
 	useFloorplan: function(media){
+	  this.editor.loadFloorplan(media)
 	},
 
 	pickWall: function(wall, pos){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 6507cc1..2fef578 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -53,9 +53,11 @@ body.noOverflow{
   overflow:hidden;
 }
 
-body.loading * {
-	-webkit-transition: all 0 ease 0 !important;
-	transition: all 0 ease 0 !important;
+body.loading *,
+body.loading .animate {
+  opacity: 0.2;
+	-webkit-transition: none !important;
+	transition: none !important;
 }
 
 html, body {
@@ -72,7 +74,7 @@ body.pastePaper .wallpaper.active span:hover{
   cursor:url(../img/paintbucket.png), auto;
 }
 
-a{
+a {
   color:black;
 	text-decoration: none;
 }
@@ -1502,7 +1504,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; }
   cursor:pointer;
 }
 
-.menu span.inuse {
+.menu span.inuse,
+.menu span.active {
   color:white;
   background:black;
   cursor:pointer;
@@ -3255,7 +3258,7 @@ a[data-role="forgot-password"] {
 
 /* blueprint upload box */
 
-.blueprintUpload {
+.blueprintUploader {
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   width: 340px;
@@ -3271,17 +3274,17 @@ a[data-role="forgot-password"] {
   margin-top: -200px;
   opacity: 0;
 }
-.blueprintUpload.active {
+.blueprintUploader.active {
   -webkit-transform: translate3D(0,0,0);
   transform: translate3D(0,0,0);
   opacity: 1;
 }
-.blueprintUpload .toolButton {
+.blueprintUploader .toolButton {
   float: none;
   width: 108px;
   display: inline-block;
 }
-.blueprintUpload .url {
+.blueprintUploader .url {
   font-size: 15px;
   border: 1px solid #888;
   padding: 2px;
@@ -3291,14 +3294,14 @@ a[data-role="forgot-password"] {
   margin-right: 10px;
   width: 190px;
 }
-.blueprintUpload p {
+.blueprintUploader p {
   font-weight: 300;
   font-size: 13px;
 }
-.blueprintUpload .blueprints {
+.blueprintUploader .blueprints {
   display: none;
 }
-.blueprintUpload .blueprints h5 {
+.blueprintUploader .blueprints h5 {
   width: 250px;
   margin: 10px auto;
   padding-top: 9px;
@@ -3332,7 +3335,7 @@ a[data-role="forgot-password"] {
   position: relative;
   top: -2px;
 }
-.blueprintUpload .wallpaperUpload .upload-icon {
+.blueprintUploader .wallpaperUpload .upload-icon {
   margin: 0 4px;
 }
 .uploadNewBlueprint {
diff --git a/views/blueprint.ejs b/views/blueprint.ejs
index 7e13318..e68e106 100644
--- a/views/blueprint.ejs
+++ b/views/blueprint.ejs
@@ -13,7 +13,7 @@
 		
 		<div id="builderView">
 			[[ include controls/builder/info ]]
-			[[ include controls/builder/toolbar ]]
+			[[ include controls/blueprint/toolbar ]]
 			[[ include controls/builder/settings ]]
       [[ include controls/blueprint/editor ]]
       [[ include controls/blueprint/scaler ]]
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 5334f85..0dbac8e 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -12,21 +12,6 @@
 	left:50%;
 	top:0px
 }
-.hud {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 10px;
-  background: white;
-}
-.ortho-hud {
-  left: 50%;
-  border-left: 1px solid black;
-}
-#url { width: 300px }
-.hud span { color: #888; cursor: pointer; }
-.hud span.active { color: #000; }
-
 .blueprintInfo {
   bottom: 14px;
   left: 10px;
@@ -47,18 +32,5 @@
 <div id="blueprintView">
   <div id="perspective"></div>
   <div id="orthographic"></div>
-
-  <div class="hud persp-hud">
-    <input type="text" id="url" placeholder="paste an image URL here!">
-    <span class="ion-ionic active" data-role="orbit-mode"></span>
-    <span class="ion-archive" data-role="keyboard-mode"></span>
-  </div>
-
-  <div class="hud ortho-hud">
-    <span class="ion-navigate" data-role="arrow-mode"></span>
-    <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
-    <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
-    <span class="ion-scissors" data-role="eraser-mode"></span>
-  </div>
 </div>
 
diff --git a/views/controls/blueprint/scaler.ejs b/views/controls/blueprint/scaler.ejs
index 972b82a..82fd2b2 100644
--- a/views/controls/blueprint/scaler.ejs
+++ b/views/controls/blueprint/scaler.ejs
@@ -1,7 +1,7 @@
 <div class="mediaDrawer fixed animate active blueprintScaler">
   <div class="box">
 
-    <div class="blueprintUpload">
+    <div class="blueprintUploader">
       <h2>Upload your Blueprint</h2>
       <p>
         Upload an image which you will trace to make a floor plan.
diff --git a/views/controls/blueprint/toolbar.ejs b/views/controls/blueprint/toolbar.ejs
new file mode 100644
index 0000000..13e99ec
--- /dev/null
+++ b/views/controls/blueprint/toolbar.ejs
@@ -0,0 +1,35 @@
+<div class="edit menu vvbox" id="blueprintToolbar">
+	<span
+		data-role='toggle-orbit-mode'
+		data-info="toggle 3D mode"
+		class="ion-ios-photos-outline"></span>
+
+  <span
+    data-role="arrow-mode"
+		data-info="move endpoints"
+    class="ion-navigate mode"></span>
+
+  <span
+    data-role="polyline-mode"
+		data-info="draw walls"
+    class="ion-ios-pulse mode"></span>
+
+  <span
+    data-role="ortho-polyline-mode"
+		data-info="draw right-angled walls"
+    class="ion-ios-grid-view-outline mode"></span>
+
+  <span
+    data-role="eraser-mode"
+		data-info="remove walls"
+    class="ion-scissors mode"></span>
+
+	<span
+		data-role='toggle-layout-settings'
+		data-info="save layout"
+		class="ion-ios-compose-outline"></span>
+</div>
+<!-- 
+    <span class="ion-ionic active" data-role="orbit-mode"></span>
+    <span class="ion-archive" data-role="keyboard-mode"></span>
+ -->
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 2c3d5ac..909309e 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -19,9 +19,12 @@
 <script type="text/javascript" src="/assets/javascripts/util.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/mx/mx.js"></script>
+
 <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movementsMobile.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.text.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.video.js"></script>
@@ -29,6 +32,7 @@
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.vimeo.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.soundcloud.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.point.js"></script>
 <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.polyline.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/_env.js"></script>
@@ -132,7 +136,8 @@
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintToolbar.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUploader.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
-- 
cgit v1.2.3-70-g09d2