diff options
| -rw-r--r-- | public/assets/javascripts/ui/_router.js | 7 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 155 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintView.js | 18 | ||||
| -rw-r--r-- | server/index.js | 3 | ||||
| -rw-r--r-- | server/lib/views/index.js | 4 | ||||
| -rw-r--r-- | views/blueprint.ejs | 1 | ||||
| -rw-r--r-- | views/controls/blueprint/editor.ejs | 53 | ||||
| -rw-r--r-- | views/controls/blueprint/scaler.ejs | 48 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 1 |
9 files changed, 227 insertions, 63 deletions
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 857377c..177e86f 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -38,6 +38,9 @@ var SiteRouter = Router.extend({ "/layout": 'layoutPicker', "/layout/:name": 'layoutEditor', + "/blueprint": 'blueprintEditor', + "/blueprint/:name": 'blueprintEditor', + "/project": 'projectPicker', "/project/new": 'newProject', "/project/new/:layout": 'projectNewWithLayout', @@ -160,13 +163,13 @@ var SiteRouter = Router.extend({ this.readerView.load(name) }, - blueprintEditor: function(e){ + blueprintEditor: function(e, name){ environment.init = environment.minimal app.launch() if (app.unsupported) return this.blueprintView = app.controller = new BlueprintView () - this.blueprintView.load() + this.blueprintView.load(name) }, signup: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js new file mode 100644 index 0000000..c781495 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -0,0 +1,155 @@ + +var wall_height = 180 +var shapes = new ShapeList +var last_point = new vec2 (0,0) + +var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + + initialize: function(opt){ + this.parent = opt.parent + + 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 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") + }, + + animate: function(t, dt){ + 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) + }) + + map.draw.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() + }, + +}) + +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) +} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 6b204e5..0a06fda 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -1,7 +1,9 @@ var BlueprintView = View.extend({ el: "#blueprintView", - + + action: "/api/layout/", + events: { }, @@ -16,14 +18,14 @@ var BlueprintView = View.extend({ }, load: function(name){ -// if (! name || name == "new") { + if (! name || name == "new") { // this.ready({ isNew: true, _id: "new", name: "" }) -// return -// } -// -// name = sanitize(name) -// -// $.get(this.action + name, this.ready.bind(this)) + return + } + + name = sanitize(name) + + $.get(this.action + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/server/index.js b/server/index.js index 0028888..078db8e 100644 --- a/server/index.js +++ b/server/index.js @@ -127,6 +127,9 @@ site.route = function () { app.get('/layout', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.modal) app.get('/layout/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.builder) + app.get('/blueprint', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/blueprint/:name', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.blueprint) + app.get('/join/:nonce', middleware.ensureAuthenticated, api.collaborator.join) app.get('/api/collaborator/:slug/index', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.index) app.post('/api/collaborator/:slug/create', middleware.ensureAuthenticated, middleware.ensureProject, api.collaborator.create) diff --git a/server/lib/views/index.js b/server/lib/views/index.js index 5241ddb..523f628 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -84,6 +84,10 @@ var views = module.exports = { res.render('builder') }, + blueprint: function (req, res) { + res.render('blueprint') + }, + modal: function (req, res) { res.render('modal'); }, diff --git a/views/blueprint.ejs b/views/blueprint.ejs index 371d66f..7e13318 100644 --- a/views/blueprint.ejs +++ b/views/blueprint.ejs @@ -16,6 +16,7 @@ [[ include controls/builder/toolbar ]] [[ include controls/builder/settings ]] [[ include controls/blueprint/editor ]] + [[ include controls/blueprint/scaler ]] </div> <div id="hud"> diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index e18f501..5334f85 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -1,8 +1,4 @@ <style type="text/css"> -html,body{width:100%;height:100%;margin:0;padding:0;} -body { - overflow: hidden; -} #perspective, #perspective .mx-scene { position: absolute; @@ -11,7 +7,6 @@ body { -webkit-transform: translateZ(0); transform: translateZ(0); } - #orthographic { position: absolute; left:50%; @@ -67,51 +62,3 @@ body { </div> </div> -<div class="mediaDrawer fixed animate active blueprintScaler"> - <div class="box"> - - <div class="blueprintUpload"> - <h2>Upload your Blueprint</h2> - <p> - Upload an image which you will trace to make a floor plan. - Images should be at least 1000x1000. - </p> - <input type="hidden" name="_csrf" value="[[- token ]]"> - <input type="text" class="url" placeholder="Enter an image URL or..."> - <div class="wallpaperUpload toolButton"> - <form> - <span class="ion-ios-upload-outline upload-icon"></span> - <label>Upload a File</label> - <input type="file" accept="image/*" multiple> - </form> - </div> - <div class="blueprints"> - <h5>Your uploaded blueprints</h5> - </div> - </div> - - <div class="blueprintInfo vvbox"> - Please tell us the scale of your blueprint. - Click two corners of a wall, and then enter how long the wall is. - <br><br> - You can also <span class="uploadNewBlueprint">upload another blueprint</span>. - <br><br> - - <form> - <div class="setting number"> - <label for="blueprint-dimensions">length</label> - <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions"> - <select id="blueprint-units" name="blueprint-units"> - <option value="ft">feet</option> - <option value="m">meters</option> - </select> - </div> - <button id="saveBlueprint">Save</button> - </form> - </div> - - <div id="blueprintMap"> - </div> - - </div> -</div> diff --git a/views/controls/blueprint/scaler.ejs b/views/controls/blueprint/scaler.ejs new file mode 100644 index 0000000..972b82a --- /dev/null +++ b/views/controls/blueprint/scaler.ejs @@ -0,0 +1,48 @@ +<div class="mediaDrawer fixed animate active blueprintScaler"> + <div class="box"> + + <div class="blueprintUpload"> + <h2>Upload your Blueprint</h2> + <p> + Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. + </p> + <input type="hidden" name="_csrf" value="[[- token ]]"> + <input type="text" class="url" placeholder="Enter an image URL or..."> + <div class="wallpaperUpload toolButton"> + <form> + <span class="ion-ios-upload-outline upload-icon"></span> + <label>Upload a File</label> + <input type="file" accept="image/*" multiple> + </form> + </div> + <div class="blueprints"> + <h5>Your uploaded blueprints</h5> + </div> + </div> + + <div class="blueprintInfo vvbox"> + Please tell us the scale of your blueprint. + Click two corners of a wall, and then enter how long the wall is. + <br><br> + You can also <span class="uploadNewBlueprint">upload another blueprint</span>. + <br><br> + + <form> + <div class="setting number"> + <label for="blueprint-dimensions">length</label> + <input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions"> + <select id="blueprint-units" name="blueprint-units"> + <option value="ft">feet</option> + <option value="m">meters</option> + </select> + </div> + <button id="saveBlueprint">Save</button> + </form> + </div> + + <div id="blueprintMap"> + </div> + + </div> +</div>
\ No newline at end of file diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index e0024a4..2c3d5ac 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -130,6 +130,7 @@ <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script> +<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script> |