blueprint scaler stuff

6 files changed, 163 insertions, 104 deletions

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>