diff options
Diffstat (limited to 'public/assets/test/ortho4.html')
| -rw-r--r-- | public/assets/test/ortho4.html | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html new file mode 100644 index 0000000..8db7ead --- /dev/null +++ b/public/assets/test/ortho4.html @@ -0,0 +1,303 @@ +<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'> +<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 { + 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; } + +#blueprintForm { + width: 240px; +} +</style> + +<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 class="mediaDrawer fixed animate blueprintUpload active"> + <span class="close">X</span> + <div class="box"> + + <h2>Upload A Room Image</h2> + + <div id="blueprintForm"> + <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> + + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + + <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> + +<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/util.js"></script> +<script src="/assets/javascripts/defaults.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/mx/primitives/mx.point.js"></script> +<script src="/assets/javascripts/mx/primitives/mx.polyline.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/engine/map/_map.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/draw.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/tools/eraser.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script> +<script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script> +<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script> +<script src="/assets/javascripts/ui/lib/View.js"></script> +<script src="/assets/javascripts/ui/lib/ModalView.js"></script> +<script src="/assets/javascripts/ui/lib/UploadView.js"></script> +<script src="/assets/javascripts/ui/lib/Parser.js"></script> +<script src="/assets/javascripts/ui/lib/Toolbar.js"></script> +<script src="/assets/javascripts/ui/builder/BlueprintUpload.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 scene, map, controls + +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 wallHeight = 180 +var shapes = new ShapeList +var ctx = map.draw.ctx +var last_point = new vec2 (0,0) + +$("#url").on("input", function(){ + floorplan.load({ src: this.value }) +}) + +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") + +var BlueprintUpload = new BlueprintUploadView ({}) + +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) + + // 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) +} +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() + + 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) + }) + + 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 |