url

2 files changed, 254 insertions, 6 deletions

diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 74351b4..5609ec3 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -15,14 +15,21 @@ body {
 	top:0px
 }
 #hud {
-	white-space: pre;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
 }
+#url { width: 300px }
 </style>
 
 <div id="perspective"></div>
 <div id="orthographic"></div>
 
-<div id="hud"></div>
+<div id="hud">
+  <input type="text" id="url" placeholder="paste an image URL here!">
+</div>
 
 <script src="/assets/javascripts/util.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
@@ -98,12 +105,13 @@ Map.UI.Ortho = function(map){
 		move: function(e, cursor){
 			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
 			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
 			last_point = new vec2( cursor.x.a, cursor.y.a )
 			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
 				document.body.style.cursor = "pointer"
 				last_point.assign(points[0])
 				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b =last_point.b
+				cursor.y.a = cursor.y.b = last_point.b
 			}
 			else {
 				document.body.style.cursor = "crosshair"
@@ -225,6 +233,10 @@ function add_mx_point (p, i) {
 	return mx
 }
 
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
@@ -234,8 +246,6 @@ function build () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-//   grid = new MX.Grid()
-//   scene.add(grid)
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
     keepImage: true,
@@ -267,7 +277,6 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
-//   grid.draw(map.draw.ctx, true)
   floorplan.draw(map.draw.ctx, true)
 
 	map.draw.coords()
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
new file mode 100644
index 0000000..19bb13a
--- /dev/null
+++ b/public/assets/test/ortho3.html
@@ -0,0 +1,239 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+#hud {
+	white-space: pre;
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+
+<script>
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
+      if (e.ctrlKey || e.which === 3) {
+        if (placing) {
+          // close polyline or cancel
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        cursor.quantize(1/map.zoom)
+        map.center.a = cursor.x.a
+        map.center.b = -cursor.y.a
+        cursor.x.b = cursor.x.a
+        cursor.y.b = cursor.y.a
+        base.mouse.down = false
+        return
+      }
+
+			// compare to initial point
+			var p = new vec2( cursor.x.a, cursor.y.a )
+			if (placing) {
+				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
+					points.push( points[0].clone() )
+					placing = false
+				}
+				else {
+					points.push( p )
+				}
+			}
+			else {
+				placing = true
+				points = []
+				points.push( p )
+			}
+		},
+		move: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+			last_point = new vec2( cursor.x.a, cursor.y.a )
+			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+				document.body.style.cursor = "pointer"
+				last_point.assign(points[0])
+				cursor.x.a = cursor.x.b = last_point.a
+				cursor.y.a = cursor.y.b = last_point.b
+			}
+			else {
+				document.body.style.cursor = "crosshair"
+			}
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		}
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
+
+
+var scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: -2,
+})
+$(window).resize(function(){
+  scene.width = window.innerWidth/2
+  map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
+
+var placing = false
+var points = []
+var shapes = []
+var ctx = map.draw.ctx
+var last_point
+
+function polyline (points, finished) {
+  if (! points) return
+  if (points.length == 1) {
+    ctx.fillStyle = "#f80"
+    map.draw.dot_at(points[0].a, points[0].b, 5)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#ff0"
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[0].a, points[0].b)
+    points.forEach(function(point, i){
+      i && ctx.lineTo(point.a, point.b)
+    })
+		ctx.stroke()
+    if (! placing || finished) {
+      ctx.fill()
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.radius = 20
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
+
+  floorplan = new MX.Image({
+    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  scene.add(floorplan)
+  
+	scene.update()
+
+	controls = new MX.OrbitCamera({
+	  el: scene.el,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  floorplan.draw(map.draw.ctx, true)
+
+	map.draw.coords()
+
+  polyline(points)
+  if (placing && last_point) {
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
+    ctx.lineTo(last_point.a, last_point.b)
+    ctx.stroke()
+  }
+
+  shapes.forEach(function(shape){
+    polyline(shape.points, true)
+  })
+
+  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()
+}
+
+</script>
\ No newline at end of file