diff options
| -rw-r--r-- | public/assets/test/ortho2.html | 21 | ||||
| -rw-r--r-- | public/assets/test/ortho3.html | 239 |
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 |