diff options
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintScale.js | 0 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintUpload.js | 122 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/blueprint/BlueprintView.js | 39 | ||||
| -rw-r--r-- | views/controls/builder/blueprint.ejs | 92 |
4 files changed, 253 insertions, 0 deletions
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintScale.js diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js new file mode 100644 index 0000000..fd3a659 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -0,0 +1,122 @@ + +var BlueprintUploadView = 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": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: 'ortho' }) + + 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) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("<div>") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || 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.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js new file mode 100644 index 0000000..f7ee13e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -0,0 +1,39 @@ + +var BlueprintView = View.extend({ + el: "#blueprintView", + + events: { + }, + + 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 BlueprintUploadView ({ parent: this }) + }, + + load: function(name){ +// if (! name || name == "new") { +// this.ready({ isNew: true, _id: "new", name: "" }) +// return +// } +// +// name = sanitize(name) +// +// $.get(this.action + name, this.ready.bind(this)) + }, + + ready: function(data){ +// this.settings.load(data) +// this.info.load(data) + }, + + hideExtras: function(){ + }, + + pickWall: function(wall, pos){ + }, + +}) diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs new file mode 100644 index 0000000..e5f3257 --- /dev/null +++ b/views/controls/builder/blueprint.ejs @@ -0,0 +1,92 @@ +<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="blueprintView"> + <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> +</div>
\ No newline at end of file |