From 3c36de54b57422f34c367934fdf62873b881fa20 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Aug 2015 16:27:40 -0400 Subject: integrate ortho3 stuff into blueprint views --- .../assets/javascripts/mx/primitives/mx.image.js | 14 +- public/assets/javascripts/ui/_router.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 148 ++++++++------------- .../javascripts/ui/blueprint/BlueprintScaler.js | 6 +- .../javascripts/ui/blueprint/BlueprintToolbar.js | 69 ++++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 128 ------------------ .../javascripts/ui/blueprint/BlueprintUploader.js | 126 ++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 30 ++++- public/assets/stylesheets/app.css | 29 ++-- views/blueprint.ejs | 2 +- views/controls/blueprint/editor.ejs | 28 ---- views/controls/blueprint/scaler.ejs | 2 +- views/controls/blueprint/toolbar.ejs | 35 +++++ views/partials/scripts.ejs | 7 +- 14 files changed, 349 insertions(+), 279 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintToolbar.js delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUpload.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUploader.js create mode 100644 views/controls/blueprint/toolbar.ejs diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 33b1373..ce99592 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -48,10 +48,16 @@ MX.Image = MX.Object3D.extend({ layer.image = image } } - - if (ops.src) image.src = ops.src - else if (ops.media) image.src = ops.media.url - else if (ops.url) image.src = ops.url + + if (ops.src) { + image.src = ops.src + } + else if (ops.media) { + image.src = ops.media.url + } + else if (ops.url) { + image.src = ops.url + } }, draw: function(ctx, recenter){ diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 177e86f..e5e46e5 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -92,7 +92,9 @@ var SiteRouter = Router.extend({ }) } - $("body").removeClass("loading") + setTimeout(function(){ + $("body").removeClass("loading") + }, 200) }, layoutEditor: function(e, name){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index c781495..545de7b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -7,22 +7,6 @@ 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(){ @@ -33,36 +17,62 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ }) */ - 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 - }) + scene = new MX.Scene().addTo("#perspective") + scene.camera.radius = 20 + cam = scene.camera - var OrthographicToolbar = new Toolbar (".ortho-hud") - OrthographicToolbar.add("arrow-mode", function(){ - map.ui.set_tool("arrow") + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + movements = new MX.Movements(cam, viewHeight) + movements.init() + movements.lock() + + app.on("move", function(pos){ + cam.x = pos.x + cam.y = pos.y + cam.z = pos.z }) - OrthographicToolbar.add("polyline-mode", function(){ - map.ui.set_tool("polyline") + + var floorplan = this.floorplan = new MX.Image({ + backface: true, }) - OrthographicToolbar.add("ortho-polyline-mode", function(){ - map.ui.set_tool("ortho-polyline") + scene.add(this.floorplan) + + // recenter perspective view by rightclicking map + this.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, }) - OrthographicToolbar.add("eraser-mode", function(){ - map.ui.set_tool("eraser") + controls.init() + }, + + loadFloorplan: function(media){ + console.log(media) + this.floorplan.load({ + media: media, + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + scale: media.scale, }) - OrthographicToolbar.pick("ortho-polyline-mode") + this.startAnimating() }, animate: function(t, dt){ @@ -75,7 +85,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - floorplan.draw(map.draw.ctx, true) + this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -99,57 +109,3 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ }, }) - -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/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 741f4fb..ff26c8e 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -7,7 +7,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", - "click .uploadNewBlueprint": "showBlueprintUpload", + "click .uploadNewBlueprint": "showUploader", }, initialize: function(opt){ @@ -38,8 +38,8 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ this.floorplan = new MX.Image () }, - showBlueprintUpload: function(){ - this.parent.blueprintUpload.show() + showUploader: function(){ + this.parent.uploader.show() }, pick: function(media){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js new file mode 100644 index 0000000..69288f6 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -0,0 +1,69 @@ +var BlueprintToolbar = View.extend({ + + el: "#blueprintToolbar", + + events: { + "click [data-role=toggle-orbit-mode]": 'toggleOrbitMode', + "click [data-role=arrow-mode]": 'arrowMode', + "click [data-role=polyline-mode]": 'polylineMode', + "click [data-role=ortho-polyline-mode]": 'orthoPolylineMode', + "click [data-role=eraser-mode]": 'eraserMode', + }, + + initialize: function(opt){ + this.parent = opt.parent + + this.$modes = this.$('.mode') + this.$arrowMode = this.$('[data-role=arrow-mode]') + this.$polylineMode = this.$('[data-role=polyline-mode]') + this.$orthoPolylineMode = this.$('[data-role=ortho-polyline-mode]') + this.$eraserMode = this.$('[data-role=eraser-mode]') + + this.orthoPolylineMode() + }, + + orbiting: true, + toggleOrbitMode: function(){ + this.orbiting = ! this.orbiting + if (this.orbiting) { + controls.toggle(true) + movements.lock() + } + else { + controls.toggle(false) + movements.unlock() + movements.gravity(true) + cam.rotationX = 0 + cam.rotationY = -cam.rotationY + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + } + }, + + setActiveMode: function( $el ) { + this.$modes.removeClass('active') + $el.addClass('active') + }, + + arrowMode: function(){ + this.setActiveMode( this.$arrowMode ) + this.parent.map.ui.set_tool("arrow") + }, + + polylineMode: function(){ + this.setActiveMode( this.$polylineMode ) + this.parent.map.ui.set_tool("polyline") + }, + + orthoPolylineMode: function(){ + this.setActiveMode( this.$orthoPolylineMode ) + this.parent.map.ui.set_tool("ortho-polyline") + }, + + eraserMode: function(){ + this.setActiveMode( this.$eraserMode ) + this.parent.map.ui.set_tool("eraser") + }, + +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js deleted file mode 100644 index 498575a..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ /dev/null @@ -1,128 +0,0 @@ - -var BlueprintUpload = UploadView.extend({ - el: ".blueprintUpload", - - mediaTag: "blueprint", - createAction: "/api/media/new", - uploadAction: "/api/media/upload", - listAction: "/api/media/user", - destroyAction: "/api/media/destroy", - - events: { - "mousedown": 'stopPropagation', - "change .url": "enterUrl", - "keydown .url": "enterSetUrl", - - "click .blueprint": "pick", - "click .remove": "destroy", - }, - - initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) - - this.$url = this.$(".url") - this.$blueprints = this.$(".blueprints") - - this.load() - }, - - loaded: false, - load: function(){ - $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) - }, - - populate: function(data){ - this.loaded = true - if (data && data.length) { - this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.hide() - this.parent.blueprintScaler.pick(data[0]) - } - else { - this.show() - } - }, - - pick: function(e){ - var $el = $(e.currentTarget) - var media = $el.data("media") - this.hide() - this.parent.blueprintScaler.pick(media) - }, - - destroy: function(e){ - e.stopPropagation() - var $el = $(e.currentTarget) - var _id = $el.closest(".blueprint").data("id") - $el.remove() - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(function(){ - }) - }, - - show: function(){ - this.toggle(true) - }, - hide: function(){ - this.toggle(false) - }, - toggle: function (state) { - this.$el.toggleClass("active", state) - }, - - addUrl: function (url){ - Parser.loadImage(url, function(media){ - if (! media) return - media._csrf = $("[name=_csrf]").val() - media.tag = this.mediaTag - - var request = $.ajax({ - type: "post", - url: this.createAction, - data: media, - }) - request.done(this.add.bind(this)) - - }.bind(this)) - }, - enterUrl: function(){ - var url = this.$url.sanitize() - this.addUrl(url) - this.$url.val("") - }, - enterSetUrl: function (e) { - e.stopPropagation() - if (e.keyCode == 13) { - setTimeout(this.enterUrl.bind(this), 100) - } - }, - - add: function(media){ - this.$blueprints.show() - this.append(media) - this.hide() - this.parent.blueprintScaler.pick(media) - }, - - append: function(media){ - var $el = $("") - var img = new Image () - img.src = media.url - var remove = document.createElement("span") - remove.className = "remove" - remove.innerHTML = "x" - - $el.data("id", media._id) - $el.data("media", media) - $el.append(img) - $el.append(remove) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js new file mode 100644 index 0000000..aeb7d9c --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -0,0 +1,126 @@ + +var BlueprintUploader = UploadView.extend({ + el: ".blueprintUploader", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "pick", + "click .remove": "destroy", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + this.$blueprints = this.$(".blueprints") + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + this.$blueprints.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.scaler.pick(data[0]) + } + else { + this.show() + } + }, + + pick: function(e){ + var $el = $(e.currentTarget) + var media = $el.data("media") + this.hide() + this.parent.scaler.pick(media) + }, + + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(function(){ + }) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.$blueprints.show() + this.append(media) + this.hide() + this.parent.scaler.pick(media) + }, + + append: function(media){ + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 0a06fda..cf627d9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -9,17 +9,20 @@ var BlueprintView = View.extend({ initialize: function(){ // this.info = new BuilderInfo ({ parent: this }) -// this.toolbar = new BuilderToolbar ({ parent: this }) // this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) - this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintScaler = new BlueprintScaler ({ parent: this }) + this.map = this.buildMap() + this.editor = new BlueprintEditor ({ parent: this }) + this.toolbar = new BlueprintToolbar ({ parent: this }) + this.uploader = new BlueprintUploader ({ parent: this }) + this.scaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ if (! name || name == "new") { // this.ready({ isNew: true, _id: "new", name: "" }) + this.uploader.load() return } @@ -28,6 +31,26 @@ var BlueprintView = View.extend({ $.get(this.action + name, this.ready.bind(this)) }, + buildMap: function(){ + // i forget if this has to be global + 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 + return map + }, + ready: function(data){ // this.settings.load(data) // this.info.load(data) @@ -37,6 +60,7 @@ var BlueprintView = View.extend({ }, useFloorplan: function(media){ + this.editor.loadFloorplan(media) }, pickWall: function(wall, pos){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6507cc1..2fef578 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -53,9 +53,11 @@ body.noOverflow{ overflow:hidden; } -body.loading * { - -webkit-transition: all 0 ease 0 !important; - transition: all 0 ease 0 !important; +body.loading *, +body.loading .animate { + opacity: 0.2; + -webkit-transition: none !important; + transition: none !important; } html, body { @@ -72,7 +74,7 @@ body.pastePaper .wallpaper.active span:hover{ cursor:url(../img/paintbucket.png), auto; } -a{ +a { color:black; text-decoration: none; } @@ -1502,7 +1504,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } cursor:pointer; } -.menu span.inuse { +.menu span.inuse, +.menu span.active { color:white; background:black; cursor:pointer; @@ -3255,7 +3258,7 @@ a[data-role="forgot-password"] { /* blueprint upload box */ -.blueprintUpload { +.blueprintUploader { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 340px; @@ -3271,17 +3274,17 @@ a[data-role="forgot-password"] { margin-top: -200px; opacity: 0; } -.blueprintUpload.active { +.blueprintUploader.active { -webkit-transform: translate3D(0,0,0); transform: translate3D(0,0,0); opacity: 1; } -.blueprintUpload .toolButton { +.blueprintUploader .toolButton { float: none; width: 108px; display: inline-block; } -.blueprintUpload .url { +.blueprintUploader .url { font-size: 15px; border: 1px solid #888; padding: 2px; @@ -3291,14 +3294,14 @@ a[data-role="forgot-password"] { margin-right: 10px; width: 190px; } -.blueprintUpload p { +.blueprintUploader p { font-weight: 300; font-size: 13px; } -.blueprintUpload .blueprints { +.blueprintUploader .blueprints { display: none; } -.blueprintUpload .blueprints h5 { +.blueprintUploader .blueprints h5 { width: 250px; margin: 10px auto; padding-top: 9px; @@ -3332,7 +3335,7 @@ a[data-role="forgot-password"] { position: relative; top: -2px; } -.blueprintUpload .wallpaperUpload .upload-icon { +.blueprintUploader .wallpaperUpload .upload-icon { margin: 0 4px; } .uploadNewBlueprint { diff --git a/views/blueprint.ejs b/views/blueprint.ejs index 7e13318..e68e106 100644 --- a/views/blueprint.ejs +++ b/views/blueprint.ejs @@ -13,7 +13,7 @@
[[ include controls/builder/info ]] - [[ include controls/builder/toolbar ]] + [[ include controls/blueprint/toolbar ]] [[ include controls/builder/settings ]] [[ include controls/blueprint/editor ]] [[ include controls/blueprint/scaler ]] diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 5334f85..0dbac8e 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -12,21 +12,6 @@ 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; } - .blueprintInfo { bottom: 14px; left: 10px; @@ -47,18 +32,5 @@
- -
- - - -
- -
- - - - -
diff --git a/views/controls/blueprint/scaler.ejs b/views/controls/blueprint/scaler.ejs index 972b82a..82fd2b2 100644 --- a/views/controls/blueprint/scaler.ejs +++ b/views/controls/blueprint/scaler.ejs @@ -1,7 +1,7 @@
-
+

Upload your Blueprint

Upload an image which you will trace to make a floor plan. diff --git a/views/controls/blueprint/toolbar.ejs b/views/controls/blueprint/toolbar.ejs new file mode 100644 index 0000000..13e99ec --- /dev/null +++ b/views/controls/blueprint/toolbar.ejs @@ -0,0 +1,35 @@ +

+ diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2c3d5ac..909309e 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -19,9 +19,12 @@ + + + @@ -29,6 +32,7 @@ + @@ -132,7 +136,8 @@ - + + -- cgit v1.2.3-70-g09d2