diff options
Diffstat (limited to 'public/assets/test/ortho2.html')
| -rw-r--r-- | public/assets/test/ortho2.html | 374 |
1 files changed, 374 insertions, 0 deletions
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..ef77256 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,374 @@ +<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'> +<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 { + position: absolute; + top: 0; + left: 0; + padding: 10px; + background: white; +} +#url { width: 300px } +#hud span { color: #888; cursor: pointer; } +#hud span.active { color: #000; } +</style> + +<div id="perspective"></div> +<div id="orthographic"></div> + +<div id="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> + +<script src="/assets/javascripts/util.js"></script> +<script src="/assets/javascripts/defaults.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/bower_components/fiber/src/fiber.min.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/extensions/mx.movements.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/coords.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/tools/_base.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script> + +<script> +var app = window.app || {} +app.tube = new Tube () +app.on = function(){ app.tube.on.apply(app.tube, arguments) } +app.off = function(){ app.tube.off.apply(app.tube, arguments) } + +var MapTool = Fiber.extend(function(base){ + var exports = { + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + cancel: function(){}, + } + return exports +}) + +var PositionTool = MapTool.extend(function(base){ + var exports = { + down: function(e, cursor){ + 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 + map.ui.mouse.down = false + }, + } + return exports +}) + +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (placing) { + // close polyline or cancel + placing = false + if (points.length > 2) { + add_mx_polyline(points) + } + else { + points.length = 0 + } + return + } + map.ui.tools.position.down(e, cursor) + 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 + add_mx_polyline(points) + } + else { + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + exports.move = function(e, cursor){ + 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" + } + } + return exports +}) + +var scene, map, controls +var last_point = new vec2(0,0) + +map = new Map ({ + type: "ortho", + el: document.querySelector("#orthographic"), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, +}) +map.ui.add_tool("arrow", new ArrowTool) +map.ui.add_tool("polyline", new PolylineTool) +map.ui.add_tool("position", new PositionTool) +map.ui.set_tool("arrow") + +$(window).resize(function(){ + scene.width = window.innerWidth/2 + map.canvas.width = map.dimensions.a = window.innerWidth/2 +}) + +var wallHeight = 180 +var placing = false +var points, mx_points = [] +var shapes = [] +var ctx = map.draw.ctx +var last_point + +shapes.findClosestPoint = function(){} + +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 = "rgba(255,255,0,0.1)" + 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() + } + } +} + +function add_mx_polyline (points) { + mx_points.forEach(function(mx){ scene.remove(mx) }) + var faces = [] + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i] + face = add_mx_polyline_face(head, tail) + faces.push(face) + } + shapes.push({ + mx: faces, + points: points, + }) + points = [] +} +function add_mx_polyline_face(head, tail){ + var mx = new MX.Object3D() + var mid_x = (head.a + tail.a) + var mid_z = (head.b + tail.b) + var len = head.distanceTo( tail ) + var angle = atan2( head.b - tail.b, head.a - tail.a ) + mx.move({ + x: mid_x / 2, + y: wallHeight/2 + 1, + z: mid_z / 2, + width: ceil(len), + height: wallHeight, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) + return mx +} +function add_mx_point (p, i) { + var mx = new MX.Object3D() + mx.updateChildren = false + mx.move({ + x: p.a, + y: 11, + z: p.b, + width: 20, + height: 20, + rotationX: PI/2, + }) + mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' + mx.el.style.backfaceVisibility = "visible" + mx.el.style.borderRadius = "50%" + scene.add(mx) + return mx +} + +$("#url").on("input", function(){ + floorplan.load({ src: this.value }) +}) +$("[data-role=orbit-mode]").click(function(){ + $("#hud .active").removeClass('active') + $(this).addClass('active') + controls.toggle(true) + movements.lock() +}) +$("[data-role=keyboard-mode]").click(function(){ + $("#hud .active").removeClass('active') + $(this).addClass('active') + 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 +}) + +document.addEventListener('DOMContentLoaded', build) +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) + 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) +} +var last_t = 0 +function animate(t){ + requestAnimationFrame(animate) + + var dt = t - last_t + last_t = t + + 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() + + 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 |