From a0f8dc283b618105dbba0f25624488b55b47990a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 17:45:10 -0400 Subject: binding events --- public/assets/javascripts/mx/extensions/mx.movements.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 669a7f4..cea3325 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -99,7 +99,7 @@ MX.Movements = function (cam) { break case 27: // esc - map.toggle() + map && map.toggle() break } }) -- cgit v1.2.3-70-g09d2 From 9888e712a14cc2cf3af98c637f596bfe3cee2566 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 18:05:14 -0400 Subject: esc cancels more things --- .../assets/javascripts/mx/extensions/mx.movements.js | 15 ++++++++++++++- public/assets/javascripts/ui/editor/MediaEditor.js | 1 + public/assets/javascripts/ui/editor/MediaViewer.js | 18 ++---------------- public/assets/javascripts/ui/editor/WallpaperPicker.js | 10 +++++++--- 4 files changed, 24 insertions(+), 20 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cea3325..c02c285 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -99,7 +99,20 @@ MX.Movements = function (cam) { break case 27: // esc - map && map.toggle() + if (Scenery.nextMedia) { + Scenery.nextMedia = null + app.tube('cancel-scenery') + } + else if (Scenery.nextWallpaper) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { + app.controller.mediaViewer.hide() + } + else { + map && map.toggle && map.toggle() + } break } }) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index eaa3134..59fdc70 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -181,6 +181,7 @@ var MediaEditor = FormView.extend({ var scenery = this.scenery this.hide() Scenery.remove(scenery.id) + Scenery.resize.hide() }.bind(this)) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 15245cf..0ac6755 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -136,19 +136,6 @@ var MediaViewer = ModalView.extend({ return } -// else { -// this.picked = {} -// this.picked.media = media -// this.picked.image = image -// } -// }, -// -// drag: function(e){ -// if (! this.pickedMedia) return -// var media = this.picked.media -// var image = this.picked.image -// this.picked = null - this.hide() var $ants = $('.ants'); @@ -156,8 +143,6 @@ var MediaViewer = ModalView.extend({ Scenery.nextMedia = media -// console.log(media.type) - switch (media.type) { case "video": $floatingImg.attr('src', '/assets/img/playbutton.png') @@ -185,12 +170,13 @@ var MediaViewer = ModalView.extend({ $floatingImg.attr('src', '') $(window).off('mousemove', _followCursor) $(window).off('mousedown', _hideCursor) + app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) + app.on('cancel-scenery', _hideCursor) $ants.addClass('edit') _followCursor(e) }, - }) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 0dd2921..3756e88 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -97,11 +97,15 @@ var WallpaperPicker = UploadView.extend({ left: (e.pageX + 10) + 'px', }); } - $(window).on('mousemove', _followCursor) - $(window).one('click', function () { + function _hideCursor (e) { $(window).off('mousemove', _followCursor) + $(window).off('click', _hideCursor) + app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() - }); + } + $(window).on('mousemove', _followCursor) + $(window).one('click', _hideCursor); + app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); }) -- cgit v1.2.3-70-g09d2 From 39ad93be5d54f10f986526a1308603733342dd65 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 2 Oct 2014 17:03:49 -0400 Subject: hide keyz --- public/assets/javascripts/mx/extensions/mx.movements.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index c02c285..4627cd3 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -29,6 +29,8 @@ MX.Movements = function (cam) { var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } + $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) }) + return { init: function () { -- cgit v1.2.3-70-g09d2 From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- public/assets/img/text-cursor.png | Bin 0 -> 1622 bytes public/assets/javascripts/mx/primitives/mx.text.js | 67 +++++++++------- .../rectangles/engine/rooms/projector.js | 30 -------- .../rectangles/engine/scenery/_scenery.js | 4 + .../rectangles/engine/scenery/resize.js | 16 +--- .../rectangles/engine/scenery/types/image.js | 2 + .../rectangles/engine/scenery/types/text.js | 66 ++++++++++++++++ .../rectangles/engine/scenery/types/video.js | 2 + .../assets/javascripts/rectangles/models/mat4.js | 78 ------------------- .../assets/javascripts/rectangles/models/wall.js | 8 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 3 + public/assets/javascripts/ui/editor/EditorView.js | 10 ++- public/assets/javascripts/ui/editor/MediaEditor.js | 5 -- public/assets/javascripts/ui/editor/TextEditor.js | 85 ++++++++++++++++++++- public/assets/stylesheets/app.css | 5 +- views/controls/editor/text-editor.ejs | 4 + views/controls/editor/toolbar.ejs | 2 +- views/partials/scripts.ejs | 13 ++-- 18 files changed, 230 insertions(+), 170 deletions(-) create mode 100644 public/assets/img/text-cursor.png delete mode 100644 public/assets/javascripts/rectangles/engine/rooms/projector.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/text.js delete mode 100644 public/assets/javascripts/rectangles/models/mat4.js (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/img/text-cursor.png b/public/assets/img/text-cursor.png new file mode 100644 index 0000000..66e9e0d Binary files /dev/null and b/public/assets/img/text-cursor.png differ diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 9c7af5c..7b8e595 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -3,34 +3,49 @@ MX.Text = MX.Object3D.extend({ init: function (ops) { this.type = "Text" - - var layer = new MX.Object3D('text') - layer.width = ops.width || 100 - layer.height = ops.height || 50 - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.scale = ops.scale || 1 - layer.el.innerHTML = ops.value || "" - if (ops.id) layer.el.id = ops.id; - if (ops.background) layer.el.style.background = ops.background; - if (ops.color) layer.el.style.color = ops.color; - if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px"; - this.add(layer) + this.type = "Image" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - this.children.forEach(function (c, i) { - if (ops.classname) { - c.el.classList.add(ops.classname) - } - else { - } - c.el.style.backgroundRepeat = 'no-repeat' - }) + this.scale = ops.scale || 1 + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("text") + this.el.classList.add("mx-scenery") + + this.inner = document.createElement("div") + this.inner.style.width = "100%" + this.el.appendChild(this.inner) + + this.load(ops) + }, + + load: function(ops){ + if (ops.color) this.el.style.color = ops.color; + if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; + if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.dirty = true - this.updateChildren = true - this.update() - } + this.inner.innerHTML = ops.media.description || "" + }, + + setText: function(text){ + this.inner.innerHTML = text + }, }) diff --git a/public/assets/javascripts/rectangles/engine/rooms/projector.js b/public/assets/javascripts/rectangles/engine/rooms/projector.js deleted file mode 100644 index 2eac314..0000000 --- a/public/assets/javascripts/rectangles/engine/rooms/projector.js +++ /dev/null @@ -1,30 +0,0 @@ - -rooms.projector = new function(){ - - projector = new THREE.Projector(); - vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); - projector.unprojectVector( vector, camera ); - - raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); - intersects = raycaster.intersectObjects( scene.children, true ); - -} - - - -THREE.Projector = function () { - - _viewProjectionMatrix = new THREE.Matrix4(), - - this.unprojectVector = function ( vector, camera ) { - camera.projectionMatrixInverse.getInverse( camera.projectionMatrix ); - - _viewProjectionMatrix.multiplyMatrices( - camera.matrixWorld, - camera.projectionMatrixInverse - ); - - return vector.applyProjection( _viewProjectionMatrix ); - }; - -} diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 69e9ba7..3d3067f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -24,6 +24,10 @@ var Scenery = new function(){ case 'vimeo': scene_media = new Scenery.types.video (opt) break + + case 'text': + scene_media = new Scenery.types.text (opt) + break } base.list[scene_media.id] = scene_media return scene_media diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 893237c..0ce976e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -117,22 +117,13 @@ Scenery.resize = new function(){ base.bind = function(){ dots.forEach(function(dot){ Scenery.mouse.bind_el(dot.el) - $(dot.el).bind({ - mouseenter: function(e){ -// Scenery.resize.hovering = true - }, - mouseleave: function(e){ -// Scenery.resize.hovering = false -// base.defer_hide() - } - }) }) Scenery.mouse.on("down", down) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) } - this.unbind = function(){ + base.unbind = function(){ dots.forEach(function(dot){ Scenery.mouse.unbind_el(dot.el) }) @@ -151,7 +142,6 @@ Scenery.resize = new function(){ naturalDimension = obj.naturalDimensions dimension = obj.dimensions position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) - scale = obj.mx.scale oldState = obj.serialize() document.body.classList.add("dragging") @@ -165,7 +155,6 @@ Scenery.resize = new function(){ var width = cursor.x.magnitude() var height = cursor.y.magnitude() var mag = cursor.magnitude() - var old_width = dimension.a * scale if (abs(width) > abs(height)) { mag = x_sign * mag * sign(width) @@ -175,9 +164,6 @@ Scenery.resize = new function(){ } obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) - // dimension.a // scale * (old_width + mag) / old_width - -// console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a) if (selected_dot.side & LEFT_RIGHT) { obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index aa43341..bed847b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -3,6 +3,8 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { + type: 'image', + init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js new file mode 100644 index 0000000..16c7a5c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -0,0 +1,66 @@ + +Scenery.types.text = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'text', + + init: function(opt){ + + opt.scale = 1 + + base.init.call(this, opt) + + this.build() + this.bind() + + if (opt.data) { + if (opt.wall) { + var position = opt.wall.mxToPosition(opt.data.position) + opt.index = opt.wall.surface.index_for_x( position.a, 0 ) + } + this.set_wall(opt) + this.deserialize(opt.data) + } + else { + this.set_wall(opt) + if (this.bounds) { + this.recenter() + if (opt.position) { + this.translateTo(opt.position) + } + var mx_position = this.wall.positionToMx( this.position, this.dimensions ) + this.mx.move(mx_position) + } + } + }, + + build: function(){ + this.mx = new MX.Text({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + }, + + setText: function(text){ + this.media.description = text + this.mx.setText(text) + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + }, + } + + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 2ef6ec3..b723f56 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -2,6 +2,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { + + type: 'video', init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/models/mat4.js b/public/assets/javascripts/rectangles/models/mat4.js deleted file mode 100644 index b061199..0000000 --- a/public/assets/javascripts/rectangles/models/mat4.js +++ /dev/null @@ -1,78 +0,0 @@ -function mat4(e){ - this.elements = [ 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 ] - return this -} -mat4.prototype.set = function (a) { - var els = this.elements - a.forEach(function(n,i){ els[i] = n }) - return this -} -mat4.prototype.clone = function(){ - return (new mat4).set(this.els) -} -mat4.prototype.identity = function () { - this.set([ - 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 - ]); - return this; -} -mat4.prototype.getInverse = function (m, throwOnInvertible) { - - // based on http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm - var te = this.elements; - var me = m.elements; - - var n11 = me[0], n12 = me[4], n13 = me[8], n14 = me[12]; - var n21 = me[1], n22 = me[5], n23 = me[9], n24 = me[13]; - var n31 = me[2], n32 = me[6], n33 = me[10], n34 = me[14]; - var n41 = me[3], n42 = me[7], n43 = me[11], n44 = me[15]; - - te[0] = n23*n34*n42 - n24*n33*n42 + n24*n32*n43 - n22*n34*n43 - n23*n32*n44 + n22*n33*n44; - te[4] = n14*n33*n42 - n13*n34*n42 - n14*n32*n43 + n12*n34*n43 + n13*n32*n44 - n12*n33*n44; - te[8] = n13*n24*n42 - n14*n23*n42 + n14*n22*n43 - n12*n24*n43 - n13*n22*n44 + n12*n23*n44; - te[12] = n14*n23*n32 - n13*n24*n32 - n14*n22*n33 + n12*n24*n33 + n13*n22*n34 - n12*n23*n34; - te[1] = n24*n33*n41 - n23*n34*n41 - n24*n31*n43 + n21*n34*n43 + n23*n31*n44 - n21*n33*n44; - te[5] = n13*n34*n41 - n14*n33*n41 + n14*n31*n43 - n11*n34*n43 - n13*n31*n44 + n11*n33*n44; - te[9] = n14*n23*n41 - n13*n24*n41 - n14*n21*n43 + n11*n24*n43 + n13*n21*n44 - n11*n23*n44; - te[13] = n13*n24*n31 - n14*n23*n31 + n14*n21*n33 - n11*n24*n33 - n13*n21*n34 + n11*n23*n34; - te[2] = n22*n34*n41 - n24*n32*n41 + n24*n31*n42 - n21*n34*n42 - n22*n31*n44 + n21*n32*n44; - te[6] = n14*n32*n41 - n12*n34*n41 - n14*n31*n42 + n11*n34*n42 + n12*n31*n44 - n11*n32*n44; - te[10] = n12*n24*n41 - n14*n22*n41 + n14*n21*n42 - n11*n24*n42 - n12*n21*n44 + n11*n22*n44; - te[14] = n14*n22*n31 - n12*n24*n31 - n14*n21*n32 + n11*n24*n32 + n12*n21*n34 - n11*n22*n34; - te[3] = n23*n32*n41 - n22*n33*n41 - n23*n31*n42 + n21*n33*n42 + n22*n31*n43 - n21*n32*n43; - te[7] = n12*n33*n41 - n13*n32*n41 + n13*n31*n42 - n11*n33*n42 - n12*n31*n43 + n11*n32*n43; - te[11] = n13*n22*n41 - n12*n23*n41 - n13*n21*n42 + n11*n23*n42 + n12*n21*n43 - n11*n22*n43; - te[15] = n12*n23*n31 - n13*n22*n31 + n13*n21*n32 - n11*n23*n32 - n12*n21*n33 + n11*n22*n33; - - var det = n11 * te[ 0 ] + n21 * te[ 4 ] + n31 * te[ 8 ] + n41 * te[ 12 ]; - - if ( det == 0 ) { - var msg = "Matrix4.getInverse(): can't invert matrix, determinant is 0"; - - if ( throwOnInvertible || false ) { - throw new Error( msg ) - } - else { - console.warn( msg ) - } - this.identity(); - return this - } - this.multiplyScalar( 1 / det ); - return this -} -mat4.prototype.multiplyScalar = function (n) { - var els = this.elements - els[0] *= n; els[4] *= n; els[8] *= n; els[12] *= n - els[1] *= n; els[5] *= n; els[9] *= n; els[13] *= n - els[2] *= n; els[6] *= n; els[10] *= n; els[14] *= n - els[3] *= n; els[7] *= n; els[11] *= n; els[15] *= n - return this -} - diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fdc8d8c..dc38183 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,9 +68,7 @@ }, */ mousedown: function(e){ - if (Scenery.nextText) { - } - else if (Scenery.nextMedia) { + if (Scenery.nextMedia) { var offset = offsetFromPoint(e, mx.el) if (! offset) { return } @@ -91,13 +89,15 @@ app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) Scenery.hovering = true + + app.controller.pick(scenery) UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, redo: scenery.serialize(), }) - + // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 513306d..49decc2 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -3,6 +3,7 @@ var EditorToolbar = View.extend({ el: "#editorToolbar", events: { + "mousedown": 'stopPropagation', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', @@ -42,6 +43,7 @@ var EditorToolbar = View.extend({ // this.resizeMedia(true) // this.destroyMedia(false) $(".inuse").removeClass("inuse") + $("body").removeClass("addText") this.parent.hideExtras() this.resetPermissions() }, @@ -131,6 +133,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.lightControl.hide() this.parent.settings.hide() this.parent.textEditor.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 83db532..67687fe 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -42,11 +42,19 @@ var EditorView = View.extend({ }, pick: function(scenery){ - this.mediaEditor.pick(scenery) + if (scenery.type == "text") { + this.mediaEditor.hide() + this.textEditor.pick(scenery) + } + else { + this.textEditor.hide() + this.mediaEditor.pick(scenery) + } }, hideExtras: function(){ this.mediaEditor.hide() + this.textEditor.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index e4f93df..0a4d894 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -76,7 +76,6 @@ var MediaEditor = FormView.extend({ case "image": this.$(".image").show() this.$(".video").hide() - break case "youtube": @@ -90,7 +89,6 @@ var MediaEditor = FormView.extend({ this.$loop.prop('checked', !! media.loop) this.$mute.prop('checked', !! media.mute) this.$keyframe.val( Number(media.keyframe || 0) ) - break } }, @@ -166,7 +164,6 @@ var MediaEditor = FormView.extend({ this.scenery.media.title = this.$name.val() this.scenery.media.description = this.$description.val() Minotaur.watch( app.router.editorView.settings ) - if (this.scenery.mx) { this.scenery.mx.bound = false this.scenery.mx.el.classList.remove("picked") @@ -177,8 +174,6 @@ var MediaEditor = FormView.extend({ }, destroy: function(){ -// ConfirmModal.confirm("Are you sure you want delete this object?", function(){ -// }.bind(this)) var scenery = this.scenery this.hide() Scenery.remove(scenery.id) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0319a31..0d082ca 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -1,6 +1,8 @@ var TextEditor = FormView.extend({ el: "#textEditor", + tainted: false, + scenery: null, events: { "keydown": 'taint', @@ -9,20 +11,87 @@ var TextEditor = FormView.extend({ "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', "input [name=text-body]": 'changeText', - "click [data-role=destroy-media]": "destroy", + "click [data-role=destroy-text]": "destroy", }, initialize: function(opt){ this.parent = opt.parent this.__super__.initialize.call(this) + this.$settings = this.$(".setting") + this.$noTextMessage = this.$(".no-text") this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") }, toggle: function(state){ - this.$el.toggleClass("active", state); + $("#keyhint").fadeOut(200) + + this.$el.toggleClass("active", state) + if (state) { + Scenery.nextMedia = { type: 'text', width: 300, height: 150 } + this.createMode(true) + } + }, + + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(scenery){ + this.tainted = false + this.scenery = scenery + this.scenery.mx.bound = true + this.scenery.mx.el.classList.add("picked") + }, + + unbind: function(){ + if (this.scenery && this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } + } + this.tainted = false + this.scenery = null + }, + + createMode: function(state){ + this.$settings.toggle(! state) + this.$noTextMessage.toggle(!! state) + $("body").toggleClass("addText", !! state) + }, + + pick: function(scenery){ + if (this.scenery) { + this.unbind() + } + + Scenery.resize.show(scenery) + Scenery.hovering = true + + this.bind(scenery) + this.$el.toggleClass("active", true) + this.$textBody.val( this.scenery.media.description ) + + this.createMode(false) + + if (! this.scenery.media.description) { + setTimeout(function(){ + this.$textBody.focus() + }.bind(this), 100) + } }, taint: function(e){ @@ -35,7 +104,17 @@ var TextEditor = FormView.extend({ changeFontSize: function(){ }, - changeText: function(){ + changeText: function(e){ + e.stopPropagation() + var text = this.$textBody.val() + this.scenery.setText(text) }, + + destroy: function(){ + var scenery = this.scenery + this.hide() + Scenery.remove(scenery.id) + Scenery.resize.hide() + }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e626d39..e746cad 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -667,9 +667,12 @@ iframe.embed { -webkit-box-sizing: content-box; box-sizing: content-box; } -.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] { +.destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } +.addText .mx-scene, .menu span.inuse[data-role="toggle-text-editor"] { + cursor:url(/assets/img/text-cursor.png), auto; +} .mx-scenery:active { cursor: pointer; diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index 205fbdf..a14c469 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -1,6 +1,10 @@

Edit Text

+
+ Click a wall to add text. +
+
+
-- cgit v1.2.3-70-g09d2 From 896350bb20b20aaef9c5fdfcfcf36553ff8aa614 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 13:08:46 -0400 Subject: left/right rotates --- public/assets/javascripts/mx/extensions/mx.movements.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 4627cd3..f94bbc2 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -51,7 +51,6 @@ MX.Movements = function (cam) { moveForward = true break - case 37: // left case 65: // a moveLeft = true break @@ -61,15 +60,16 @@ MX.Movements = function (cam) { moveBackward = true break - case 39: // right case 68: // d moveRight = true break + case 37: // left case 81: // q turnLeft = true break + case 39: // right case 69: // e turnRight = true break @@ -132,7 +132,6 @@ MX.Movements = function (cam) { moveForward = false break - case 37: // left case 65: // a moveLeft = false break @@ -142,15 +141,16 @@ MX.Movements = function (cam) { moveBackward = false break - case 39: // right case 68: // d moveRight = false break + case 37: // left case 81: // q turnLeft = false break + case 39: // right case 69: // e turnRight = false break -- cgit v1.2.3-70-g09d2 From eb1e515f5446d8a90d92c2f60722eca23a9c4fe5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 17:55:35 -0400 Subject: clamp looking up/down --- public/assets/javascripts/mx/extensions/mx.movements.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index f94bbc2..065c93b 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -16,8 +16,8 @@ MX.Movements = function (cam) { creeping = false, locked = false, gravity = false, - rotationX_min = PI/-2, - rotationX_max = PI/2 + rotationX_min = PI/-4, + rotationX_max = PI/6 var v = 12, vr = Math.PI * 0.012, -- cgit v1.2.3-70-g09d2 From 86153d1221e38615d0a7dea8a8029a184fb25ece Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Oct 2014 20:32:31 -0400 Subject: rooms editor in builder --- .../javascripts/mx/extensions/mx.movements.js | 2 +- .../rectangles/engine/map/ui_minimap.js | 2 -- .../assets/javascripts/rectangles/models/wall.js | 2 ++ .../assets/javascripts/ui/editor/EditorToolbar.js | 8 ++++++-- public/assets/javascripts/ui/editor/EditorView.js | 6 ++++++ public/assets/javascripts/ui/site/LayoutsModal.js | 5 +++++ views/controls/builder/info.ejs | 2 +- views/controls/editor/toolbar.ejs | 23 +++++++++++----------- views/editor.ejs | 1 + 9 files changed, 34 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 065c93b..0ce03db 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -113,7 +113,7 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() } else { - map && map.toggle && map.toggle() + app.controller.toolbar.toggleMap() } break } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js index d7280b9..fabbdb9 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js @@ -7,7 +7,6 @@ Map.UI.Minimap = function(map){ base.creating = base.dragging = base.resizing = false -/* base.mouse = new mouse({ el: map.el, down: down, @@ -16,7 +15,6 @@ Map.UI.Minimap = function(map){ up: up, rightclick: rightclick, }) -*/ base.wheel = new wheel({ el: map.el, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fcb2f5e..7ff9015 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -114,6 +114,8 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) + + app.controller.pickWall(base, pos) } else { app.controller.pickWall(base, pos) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4f12a7b..8a707ec 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -19,8 +19,12 @@ var EditorToolbar = View.extend({ }, toggleMap: function(){ - map.toggle() - // $("#minimap").toggleClass("hide"); + var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") + this.resetControls() + $("[data-role='toggle-map-view']").toggleClass("inuse", state) + map.toggle(state) + $("#minimap").toggleClass("hide", state) + this.parent.info.toggle(state) }, toggleSettings: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index b35c872..6aff601 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -11,6 +11,7 @@ var EditorView = View.extend({ initialize: function(){ this.toolbar = new EditorToolbar ({ parent: this }) this.settings = new EditorSettings ({ parent: this }) + this.info = new BuilderInfo ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) @@ -27,6 +28,11 @@ var EditorView = View.extend({ }, loadLayout: function(layout){ + if (layout == "empty") { + this.readyLayout({}) + this.toolbar.toggleMap() + return + } layout = sanitize(layout) $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 99db2a3..73c63e8 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -48,6 +48,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ events: { "click .templates span": 'toggleActive', + "click [data-role='create-new-layout']": 'createNewLayout', "submit form": 'newProject', }, @@ -70,6 +71,10 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ window.location.pathname = "/project/" + $layout.data("slug") + "/edit" }, + createNewLayout: function(){ + window.location.pathname = "/layout/new" + }, + newProject: function(e){ e && e.preventDefault() window.location.pathname = "/project/new" diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index d92d34c..7ef0b6a 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -1,4 +1,4 @@ -
+
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 85800f8..47d7c3c 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -4,10 +4,10 @@ data-role='open-media-viewer' data-info="add media" class="ion-ios7-photos-outline"> - + +

@@ -29,4 +35,9 @@
+ +
+ +
+
\ No newline at end of file diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index 7c40a75..8443abb 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,3 +1,5 @@ + +

Room Settings

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 07ee7a5..05f4b58 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -102,6 +102,7 @@ + -- cgit v1.2.3-70-g09d2 From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 17:09:45 -0400 Subject: help messages on button, starting drag stuff --- public/assets/javascripts/app.js | 4 -- .../javascripts/mx/extensions/mx.movements.js | 12 ++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 54 ++++++++++++++-------- .../assets/javascripts/ui/editor/LightControl.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/editor/Presets.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 2 +- 8 files changed, 52 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 98e1820..f8372cd 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -18,10 +18,6 @@ else { new WOW().init(); -$('#help-button').click( function(){ - $('body').chardinJs('start') -}); - var scene, cam, map; var app = new function(){} diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index b158625..40e786d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -129,9 +129,19 @@ MX.Movements = function (cam) { } else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() + $(".inuse").removeClass("inuse") } else if (app.controller.lightControl.$el.hasClass('active')) { app.controller.lightControl.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.wallpaperPicker.$el.hasClass('active')) { + app.controller.wallpaperPicker.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.presets.$el.hasClass('active')) { + app.controller.presets.hide() + $(".inuse").removeClass("inuse") } else { app.controller.toolbar.toggleMap() @@ -242,7 +252,7 @@ MX.Movements = function (cam) { var ry = cam.rotationY var s = creeping ? scale * creepFactor : scale - var vrrrr = creeping ? vr * creepFactor * 5 : vr + var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5 var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown vx = vz = 0 diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e47739b..c0c140f 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) if (state) { - this.parent.cursor.show("settings") + this.parent.cursor.message("settings") } }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 4a6e616..8bfaef8 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -2,6 +2,8 @@ var HelpCursor = View.extend({ el: "#helpCursor", + active: false, + messages: { start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", @@ -10,33 +12,47 @@ var HelpCursor = View.extend({ colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, - shown: {}, initialize: function(){ - $(window).mousemove(function(e){ - this.el.style.left = e.pageX + "px" - this.el.style.top = e.pageY + "px" - }.bind(this)) - this.show("start") + $('#help-button').click(this.toggle.bind(this)); }, - - show: function(name){ - this.showMessage(name) + + toggle: function(){ + this.active ? this.stop() : this.start() + }, + + start: function(){ + if (this.active) return + this.active = true + this.message('start') this.$el.show() +// $('body').chardinJs('start') +// $(window).one("click", function(){ +// $('body').chardinJs('stop') +// }) + this.move({ pageX: -1000, pageY: -10000 }) + this.moveFn = this.move.bind(this) + document.addEventListener("mousemove", this.moveFn) }, - - hide: function(){ + + stop: function(){ + this.active = false this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + move: function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }, + + show: function(name){ + this.showMessage(name) }, - showMessage: function(name){ - if (+(this.shown[name] || 0) < 2) { - this.$el.html(this.messages[name]) - this.shown[name] = (+this.shown[name] || 0) + 1 - } - else { - this.$el.html("") - } + message: function(name){ + if (! this.active) return + this.$el.html(this.messages[name]) }, }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index bb4454a..10f8d2c 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -77,7 +77,7 @@ var LightControl = View.extend({ }, show: function(){ - this.parent.cursor.show("colors") + this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index df77fb1..e196e41 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 6222e33..35b5b58 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -43,7 +43,7 @@ var Presets = View.extend({ }, show: function(){ - this.parent.cursor.show("presets") + this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 9583376..ad30ad8 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { - this.parent.cursor.show("wallpaper") + this.parent.cursor.message("wallpaper") this.load() } else { -- cgit v1.2.3-70-g09d2 From 513a272520222784d67dc22c1ac833aa47a9c844 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:58:28 -0400 Subject: rename light control to color control --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../javascripts/rectangles/engine/scenery/undo.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 2 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 305 +++++++++++++++++++++ .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 20 +- public/assets/javascripts/ui/editor/EditorView.js | 2 +- .../assets/javascripts/ui/editor/LightControl.js | 305 --------------------- public/assets/javascripts/ui/editor/Presets.js | 2 +- public/assets/stylesheets/app.css | 6 +- views/controls/editor/color-control.ejs | 28 ++ views/controls/editor/light-control.ejs | 28 -- views/controls/editor/toolbar.ejs | 2 +- views/editor.ejs | 2 +- views/partials/scripts.ejs | 2 +- 16 files changed, 358 insertions(+), 358 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/ColorControl.js delete mode 100644 public/assets/javascripts/ui/editor/LightControl.js create mode 100644 views/controls/editor/color-control.ejs delete mode 100644 views/controls/editor/light-control.ejs (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 40e786d..c2a2473 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -131,8 +131,8 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.lightControl.$el.hasClass('active')) { - app.controller.lightControl.hide() + else if (app.controller.colorControl.$el.hasClass('active')) { + app.controller.colorControl.hide() $(".inuse").removeClass("inuse") } else if (app.controller.wallpaperPicker.$el.hasClass('active')) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index bee8c49..ff4f911 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -122,7 +122,7 @@ type: "update-colors", undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) - app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb ) Minotaur.watch( app.router.editorView.settings ) }, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index fe67e9b..c8c8880 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..735274e 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,7 +11,7 @@ var BuilderView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js new file mode 100644 index 0000000..26358f1 --- /dev/null +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -0,0 +1,305 @@ + +var ColorControl = View.extend({ + el: ".colorcontrol", + + events: { + "mousedown": "stopPropagation", + "click .color-swatches span": "select", + "mousedown #brightness-control": "beginBrightness", + "input #brightness-control": "updateBrightness", + }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], + + initialize: function(opt){ + this.parent = opt.parent + + this.colorPicker = new LabColorPicker(this, 180, 180) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) + + this.$swatches = this.$(".swatch") + this.$labels = this.$(".swatch + label") + this.$swatch = { + wall: this.$("#wall-color"), + outline: this.$("#outline-color"), + floor: this.$("#floor-color"), + ceiling: this.$("#ceiling-color"), + } + this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + + }, + + modes: [ "wall", "outline", "floor", "ceiling" ], + + load: function(data){ + this.modes.forEach(function(mode){ + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + }.bind(this)) + this.setMode("wall") + }, + + loadDefaults: function(){ + var colors = { + wall: app.defaults.colors.wall.slice(), + outline: app.defaults.colors.outline.slice(), + floor: app.defaults.colors.floor.slice(), + ceiling: app.defaults.colors.ceiling.slice(), + } + this.load(colors) + }, + + toggle: function(state){ + this.$el.toggleClass("active", state); + }, + + show: function(){ + this.parent.cursor.message("colors") + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + pick: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(this.mode, rgb) + // console.log(rgb) + Walls.setColor[ this.mode ](rgb) + }, + + setSwatchColor: function(mode, rgb) { + this.$swatch[ mode ].css("background-color", rgb_string(rgb)) + }, + + initialState: null, + + begin: function(){ + this.initialState = this.serialize() + }, + + serialize: function(){ + return { + mode: this.mode, + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, + + setMode: function (mode) { + var color, brightness + this.mode = mode + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") + color = Walls.colors[ mode ] + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + }, + + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') + this.setMode(mode) + }, + + beginBrightness: function(){ + this.begin() + $(window).one("mouseup", this.finalize.bind(this)) + }, + + updateBrightness: function(){ + this.labColor[0] = parseFloat( this.$brightnessControl.val() ) + var rgb = this.colorPicker.setLab( this.labColor ) + this.pick(rgb, this.labColor) + }, + +}) + +var LabColorPicker = function (parent, w, h) { + var base = this + var canvas = this.canvas = document.createElement('canvas') + var ctx = this.ctx = canvas.getContext('2d') + var imageData = ctx.createImageData(w,h) + var data = imageData.data + + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" + + canvas.width = w + canvas.height = h + canvas.className = "colorPicker" + + var ww = w-1 + var hh = h-1 + + var L_range = [0, 110] + var a_range = [-86.185, 98.254] + var b_range = [-107.863, 94.482] + + var rgb = [0,0,0] + + var val = 80 + + this.mouse = new mouse({ + el: canvas, + down: function(e, cursor){ + parent.begin() + cursor.x.a = -cursor.x.a + base.pick(cursor.x.a, cursor.y.a) + }, + drag: function(e, cursor){ + cursor.x.b = -cursor.x.b + base.pick(cursor.x.b, cursor.y.b) + }, + up: function(){ + parent.finalize() + } + }) + + this.setLab = function(Lab) { + val = Lab[0] + this.paint() + var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) + return rgb + } + this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) + var x = mix( i/ww, a_range[0], a_range[1] ) + var y = mix( j/hh, b_range[0], b_range[1] ) + var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) + parent.pick( rgb, [val,x,y] ) + } + this.load = function(rgba){ + var Lab = xyz2hunterlab(rgb2xyz(rgba)) + var val = clamp( Lab[0], L_range[0], L_range[1] ) + var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) + var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) + + this.moveCursor(x,y) + this.setLab(Lab) + return Lab + } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } + this.paint = function() { + val = clamp(val, L_range[0], L_range[1]) + var x, y, t + for (var i = 0; i < w; i++) { + for (var j = 0; j < h; j++) { + x = mix( i/ww, a_range[0], a_range[1] ) + y = mix( j/hh, b_range[0], b_range[1] ) + t = (j*w + i) * 4 + rgb = xyz2rgb(hunterlab2xyz(val, x, y)) + data[t] = Math.round( rgb[0] ) + data[t+1] = Math.round( rgb[1] ) + data[t+2] = Math.round( rgb[2] ) + data[t+3] = 255 + } + } + ctx.putImageData(imageData,0,0) + } + + function hunterlab2xyz (L,a,b) { + var_Y = L / 10 + var_X = a / 17.5 * L / 10 + var_Z = b / 7 * L / 10 + + Y = Math.pow(var_Y, 2) + X = ( var_X + Y ) / 1.02 + Z = -( var_Z - Y ) / 0.847 + xyz = [X,Y,Z] + } + function xyz2rgb(){ + var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) + var var_Y = xyz[1] / 100 //Y from 0 to 100.000 + var var_Z = xyz[2] / 100 //Z from 0 to 108.883 + + var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 + var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 + var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 + + if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 + else var_R = 12.92 * var_R + if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 + else var_G = 12.92 * var_G + if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 + else var_B = 12.92 * var_B + + rgb[0] = clamp(var_R * 255, 0, 255) + rgb[1] = clamp(var_G * 255, 0, 255) + rgb[2] = clamp(var_B * 255, 0, 255) + return rgb + } + function rgb2xyz(RGB){ + var var_R = ( RGB[0] / 255 ) // R from 0 to 255 + var var_G = ( RGB[1] / 255 ) // G from 0 to 255 + var var_B = ( RGB[2] / 255 ) // B from 0 to 255 + + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) + else var_R = var_R / 12.92 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) + else var_G = var_G / 12.92 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) + else var_B = var_B / 12.92 + + var_R = var_R * 100 + var_G = var_G * 100 + var_B = var_B * 100 + + //Observer. = 2°, Illuminant = D65 + var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 + var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 + var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 + return [x,y,z] + } + function xyz2hunterlab (XYZ) { + var X = XYZ[0] + var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) + var Z = XYZ[2] + var L = 10 * sqrt( Y ) + var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) + var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) + return [L,a,b] + } +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index c0c140f..664b102 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({ } if (data.colors && data.colors.wall) { - this.parent.lightControl.load(data.colors) + this.parent.colorControl.load(data.colors) } else { - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() } if (data.walls) { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index a460bbf..dceae3c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', - "click [data-role='toggle-light-control']": 'toggleLightControl', + "click [data-role='toggle-color-control']": 'toggleColorControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, @@ -46,7 +46,7 @@ var EditorToolbar = View.extend({ this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() this.parent.settings.toggle() @@ -75,7 +75,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() }, @@ -111,7 +111,7 @@ var EditorToolbar = View.extend({ this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() @@ -119,17 +119,17 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.toggle(state) }, - toggleLightControl: function(){ - var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") + toggleColorControl: function(){ + var state = ! $("[data-role='toggle-color-control']").hasClass("inuse") this.resetMode() - $("[data-role='toggle-light-control']").toggleClass("inuse", state) + $("[data-role='toggle-color-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) - this.parent.lightControl.toggle(state) + this.parent.colorControl.toggle(state) }, toggleTextEditor: function(){ @@ -138,7 +138,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) @@ -153,7 +153,7 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.toggleMap(false) this.parent.presets.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 05d1bec..9946feb 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,7 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js deleted file mode 100644 index 10f8d2c..0000000 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ /dev/null @@ -1,305 +0,0 @@ - -var LightControl = View.extend({ - el: ".lightcontrol", - - events: { - "mousedown": "stopPropagation", - "click .color-swatches span": "select", - "mousedown #brightness-control": "beginBrightness", - "input #brightness-control": "updateBrightness", - }, - - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - - initialize: function(opt){ - this.parent = opt.parent - - this.colorPicker = new LabColorPicker(this, 180, 180) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) - - this.$swatches = this.$(".swatch") - this.$labels = this.$(".swatch + label") - this.$swatch = { - wall: this.$("#wall-color"), - outline: this.$("#outline-color"), - floor: this.$("#floor-color"), - ceiling: this.$("#ceiling-color"), - } - this.$brightnessControl = this.$("#brightness-control") - - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) - - }, - - modes: [ "wall", "outline", "floor", "ceiling" ], - - load: function(data){ - this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) - }.bind(this)) - this.setMode("wall") - }, - - loadDefaults: function(){ - var colors = { - wall: app.defaults.colors.wall.slice(), - outline: app.defaults.colors.outline.slice(), - floor: app.defaults.colors.floor.slice(), - ceiling: app.defaults.colors.ceiling.slice(), - } - this.load(colors) - }, - - toggle: function(state){ - this.$el.toggleClass("active", state); - }, - - show: function(){ - this.parent.cursor.message("colors") - this.toggle(true) - }, - - hide: function(){ - this.toggle(false) - }, - - pick: function(rgb, Lab){ - this.labColor = Lab - this.setSwatchColor(this.mode, rgb) - // console.log(rgb) - Walls.setColor[ this.mode ](rgb) - }, - - setSwatchColor: function(mode, rgb) { - this.$swatch[ mode ].css("background-color", rgb_string(rgb)) - }, - - initialState: null, - - begin: function(){ - this.initialState = this.serialize() - }, - - serialize: function(){ - return { - mode: this.mode, - rgb: Walls.colors[ this.mode ] - } - }, - - finalize: function(){ - if (! this.initialState) { return } - UndoStack.push({ - type: 'update-colors', - undo: this.initialState, - redo: this.serialize(), - }) - - this.initialState = null - - // TODO: watch individual wall object here - Minotaur.watch( app.router.editorView.settings ) - }, - - setMode: function (mode) { - var color, brightness - this.mode = mode - this.$(".active").removeClass("active") - this.$swatch[ mode ].parent().addClass("active") - color = Walls.colors[ mode ] - - this.labColor = this.colorPicker.load(color) - this.$brightnessControl.val( this.labColor[0] ) - }, - - select: function(e){ - var mode = $('.swatch', e.currentTarget).data('mode') - this.setMode(mode) - }, - - beginBrightness: function(){ - this.begin() - $(window).one("mouseup", this.finalize.bind(this)) - }, - - updateBrightness: function(){ - this.labColor[0] = parseFloat( this.$brightnessControl.val() ) - var rgb = this.colorPicker.setLab( this.labColor ) - this.pick(rgb, this.labColor) - }, - -}) - -var LabColorPicker = function (parent, w, h) { - var base = this - var canvas = this.canvas = document.createElement('canvas') - var ctx = this.ctx = canvas.getContext('2d') - var imageData = ctx.createImageData(w,h) - var data = imageData.data - - var cursor = this.cursor = document.createElement("div") - cursor.className = "colorPickerCursor" - - canvas.width = w - canvas.height = h - canvas.className = "colorPicker" - - var ww = w-1 - var hh = h-1 - - var L_range = [0, 110] - var a_range = [-86.185, 98.254] - var b_range = [-107.863, 94.482] - - var rgb = [0,0,0] - - var val = 80 - - this.mouse = new mouse({ - el: canvas, - down: function(e, cursor){ - parent.begin() - cursor.x.a = -cursor.x.a - base.pick(cursor.x.a, cursor.y.a) - }, - drag: function(e, cursor){ - cursor.x.b = -cursor.x.b - base.pick(cursor.x.b, cursor.y.b) - }, - up: function(){ - parent.finalize() - } - }) - - this.setLab = function(Lab) { - val = Lab[0] - this.paint() - var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) - return rgb - } - this.pick = function(i, j){ - i = clamp(i, 0, w) - j = clamp(j, 0, h) - var x = mix( i/ww, a_range[0], a_range[1] ) - var y = mix( j/hh, b_range[0], b_range[1] ) - var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) - this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) - } - this.load = function(rgba){ - var Lab = xyz2hunterlab(rgb2xyz(rgba)) - var val = clamp( Lab[0], L_range[0], L_range[1] ) - var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) - var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - - this.moveCursor(x,y) - this.setLab(Lab) - return Lab - } - this.moveCursor = function(x,y){ - cursor.style.left = x + "px" - cursor.style.top = y + "px" - } - this.paint = function() { - val = clamp(val, L_range[0], L_range[1]) - var x, y, t - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { - x = mix( i/ww, a_range[0], a_range[1] ) - y = mix( j/hh, b_range[0], b_range[1] ) - t = (j*w + i) * 4 - rgb = xyz2rgb(hunterlab2xyz(val, x, y)) - data[t] = Math.round( rgb[0] ) - data[t+1] = Math.round( rgb[1] ) - data[t+2] = Math.round( rgb[2] ) - data[t+3] = 255 - } - } - ctx.putImageData(imageData,0,0) - } - - function hunterlab2xyz (L,a,b) { - var_Y = L / 10 - var_X = a / 17.5 * L / 10 - var_Z = b / 7 * L / 10 - - Y = Math.pow(var_Y, 2) - X = ( var_X + Y ) / 1.02 - Z = -( var_Z - Y ) / 0.847 - xyz = [X,Y,Z] - } - function xyz2rgb(){ - var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) - var var_Y = xyz[1] / 100 //Y from 0 to 100.000 - var var_Z = xyz[2] / 100 //Z from 0 to 108.883 - - var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 - var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 - var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 - - if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 - else var_R = 12.92 * var_R - if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 - else var_G = 12.92 * var_G - if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 - else var_B = 12.92 * var_B - - rgb[0] = clamp(var_R * 255, 0, 255) - rgb[1] = clamp(var_G * 255, 0, 255) - rgb[2] = clamp(var_B * 255, 0, 255) - return rgb - } - function rgb2xyz(RGB){ - var var_R = ( RGB[0] / 255 ) // R from 0 to 255 - var var_G = ( RGB[1] / 255 ) // G from 0 to 255 - var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - - if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) - else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) - else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) - else var_B = var_B / 12.92 - - var_R = var_R * 100 - var_G = var_G * 100 - var_B = var_B * 100 - - //Observer. = 2°, Illuminant = D65 - var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 - var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 - var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 - return [x,y,z] - } - function xyz2hunterlab (XYZ) { - var X = XYZ[0] - var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) - var Z = XYZ[2] - var L = 10 * sqrt( Y ) - var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) - var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) - return [L,a,b] - } -} diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 4edc957..a3dc610 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -54,7 +54,7 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.lightControl.load(this.presets[preset]) + this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1ab1198..d7999b9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,7 @@ border-left: 1px solid black; /* COLOR PICKER */ -.lightcontrol { +.colorcontrol { margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; @@ -1592,11 +1592,11 @@ border-left: 1px solid black; transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol.active { +.colorcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); } -.lightcontrol .slider { +.colorcontrol .slider { } h4 { font-weight:300; diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs new file mode 100644 index 0000000..040808e --- /dev/null +++ b/views/controls/editor/color-control.ejs @@ -0,0 +1,28 @@ +
+

Edit Room Colors

+ +
+
+ + + +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ +
+
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs deleted file mode 100644 index 99d68f5..0000000 --- a/views/controls/editor/light-control.ejs +++ /dev/null @@ -1,28 +0,0 @@ -
-

Edit Room Colors

- -
-
- - - -
- -
- -
- -
- - -
- - -
- - -
- -
-
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 1bb31b8..7b08db6 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -29,7 +29,7 @@ data-info="add wallpaper" class="ion-ios7-keypad-outline">
-
+
+ +
-
+

diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs index 9872592..cac9992 100644 --- a/views/controls/reader/media-player.ejs +++ b/views/controls/reader/media-player.ejs @@ -1,6 +1,6 @@
- + -- cgit v1.2.3-70-g09d2 From d941ec46ee1d3842387837377140e8d1fc854b17 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 24 Nov 2014 11:56:07 -0500 Subject: dividing everything by devicePixelRatio --- public/assets/javascripts/mx/mx.js | 14 +++++++------- public/assets/javascripts/mx/primitives/mx.text.js | 2 +- public/assets/javascripts/mx/primitives/mx.video.js | 4 ++-- public/assets/javascripts/mx/primitives/mx.vimeo.js | 4 ++-- public/assets/javascripts/mx/primitives/mx.youtube.js | 4 ++-- 5 files changed, 14 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index 40a5f2e..d59a551 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -162,24 +162,24 @@ var MX = MX || (function (undefined) { Object.defineProperty(this, 'width', { get: function () { return width - || parseInt(self.el.style.width, 10) + || parseInt(self.el.style.width*devicePixelRatio, 10) || 0 }, set: function (val) { width = val - this.el.style.width = width + 'px' + this.el.style.width = (width/devicePixelRatio) + 'px' } }) Object.defineProperty(this, 'height', { get: function () { return height - || parseInt(self.el.style.height, 10) + || parseInt(self.el.style.height*devicePixelRatio, 10) || 0 }, set: function (val) { height = val - this.el.style.height = height + 'px' + this.el.style.height = (height/devicePixelRatio) + 'px' } }) } @@ -302,9 +302,9 @@ var MX = MX || (function (undefined) { + (-this.y).toFixed(floatPrecision) + 'px,' + (-this.z).toFixed(floatPrecision) + 'px) ' + 'scale3d(' - + this.scaleX.toFixed(floatPrecision) + ',' - + this.scaleY.toFixed(floatPrecision) + ',' - + this.scaleZ.toFixed(floatPrecision) + ') ' + + (devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' + + (devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' + + (devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' if (rotationTranslation) { transformString += rotationTranslation.before diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index a0f9283..6b5681b 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -47,7 +47,7 @@ MX.Text = MX.Object3D.extend({ if (! font.color || font.color[0] == "#") { font.color = [0,0,0] } this.inner.style.fontFamily = "'" + font.family + "',sans-serif" - this.el.style.fontSize = (2 * font.size) + "pt" + this.el.style.fontSize = (2 * font.size / devicePixelRatio) + "pt" this.el.style.textAlign = font.align this.el.style.color = rgb_string(font.color) }, diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 333e1d2..c281f02 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -31,8 +31,8 @@ MX.Video = MX.Object3D.extend({ this.player.addEventListener("loadedmetadata", this.ready.bind(this)) this.player.addEventListener("error", this.error.bind(this)) this.player.addEventListener("ended", this.finished.bind(this)) - this.player.width = this.width - this.player.height = this.height + this.player.width = "100%" + this.player.height = "100%" this.player.src = this.media.url this.player.load() diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index e71b105..fe5ce86 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -32,8 +32,8 @@ MX.Vimeo = MX.Object3D.extend({ preload.id = uid preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&portrait=0&title=0&" + loop + "&player_id=" + uid) preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" - preload.style.width = this.media.width + "px" - preload.style.height = this.media.height + "px" + preload.style.width = "100%" + preload.style.height = "100%" preload.style.border = "0" preload.style.pointerEvents = "none" preload.className = "preload" diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 3f342a1..5c92378 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -31,8 +31,8 @@ MX.Youtube = MX.Object3D.extend({ preload.id = uid preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" preload.style.backgroundSize = "cover" - preload.style.width = this.media.width + "px" - preload.style.height = this.media.height + "px" + preload.style.width = "100%" + preload.style.height = "100%" preload.style.pointerEvents = "none" preload.style.position = "absolute" preload.style.top = "0" -- cgit v1.2.3-70-g09d2 From f5bc4ca3b111a0be8ad0726b5b3d44936983f60a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 17:56:35 -0500 Subject: orient toward horizon if looking straight down --- public/assets/javascripts/mx/extensions/mx.movementsMobile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movementsMobile.js b/public/assets/javascripts/mx/extensions/mx.movementsMobile.js index 8810649..95b61d1 100644 --- a/public/assets/javascripts/mx/extensions/mx.movementsMobile.js +++ b/public/assets/javascripts/mx/extensions/mx.movementsMobile.js @@ -163,7 +163,7 @@ MX.MobileMovements = function (cam) { dy += 360 } - destRotationX = MX.toRad(dx) + destRotationX = dx > 45 ? 0 : MX.toRad(dx) destRotationY += MX.toRad(dy) }, -- cgit v1.2.3-70-g09d2 From 904a18b763889c9f85d874388fdff9daaefb89cd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 14 Jan 2015 15:44:34 -0500 Subject: roll back devicePixelRatio fix on desktop --- public/assets/javascripts/app.js | 4 +++- public/assets/javascripts/mx/mx.js | 14 +++++++------- public/assets/stylesheets/app.css | 4 ++++ 3 files changed, 14 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 41edafe..a146325 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -3,7 +3,7 @@ if (is_mobile) { $("html").addClass("mobile") } else { - $("html").addClass("desktop") + $("html").addClass("desktop") } @@ -23,6 +23,8 @@ app.launch = function () { var movements + app.devicePixelRatio = is_mobile ? devicePixelRatio : 1 + scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index d59a551..ab9a9a0 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -162,24 +162,24 @@ var MX = MX || (function (undefined) { Object.defineProperty(this, 'width', { get: function () { return width - || parseInt(self.el.style.width*devicePixelRatio, 10) + || parseInt(self.el.style.width, 10) * app.devicePixelRatio || 0 }, set: function (val) { width = val - this.el.style.width = (width/devicePixelRatio) + 'px' + this.el.style.width = (width/app.devicePixelRatio) + 'px' } }) Object.defineProperty(this, 'height', { get: function () { return height - || parseInt(self.el.style.height*devicePixelRatio, 10) + || parseInt(self.el.style.height, 10) * app.devicePixelRatio || 0 }, set: function (val) { height = val - this.el.style.height = (height/devicePixelRatio) + 'px' + this.el.style.height = (height/app.devicePixelRatio) + 'px' } }) } @@ -302,9 +302,9 @@ var MX = MX || (function (undefined) { + (-this.y).toFixed(floatPrecision) + 'px,' + (-this.z).toFixed(floatPrecision) + 'px) ' + 'scale3d(' - + (devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' - + (devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' - + (devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' + + (app.devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' + + (app.devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' + + (app.devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' if (rotationTranslation) { transformString += rotationTranslation.before diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a149166..0ce2c5e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -929,6 +929,9 @@ border-left: 1px solid black; .no-templates { display: none; } +.no-templates a { + border-bottom: 1px solid; +} .templates span { display: block; @@ -2373,6 +2376,7 @@ button { font-weight: 500; width: 100%; font-size:14px; + font-family:'Lato', sans-serif; } #builder-units { -- cgit v1.2.3-70-g09d2 From d67ead4ebbe27dc66d89927ff3ab91662fabdae4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 13:25:23 -0500 Subject: fix tests --- public/assets/javascripts/app.js | 2 -- public/assets/javascripts/mx/mx.js | 16 ++++++++-------- public/assets/javascripts/vendor/polyfill.js | 3 ++- public/assets/test/intersect2.html | 5 +++-- public/assets/test/intersect3.html | 5 +++-- public/assets/test/surface.html | 2 +- 6 files changed, 17 insertions(+), 16 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index a146325..6ff062e 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -23,8 +23,6 @@ app.launch = function () { var movements - app.devicePixelRatio = is_mobile ? devicePixelRatio : 1 - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index ab9a9a0..60651eb 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -25,7 +25,7 @@ var MX = MX || (function (undefined) { var MX = { version: '0.1.0', prefix: undefined, - rotationUnit: 'rad' + rotationUnit: 'rad', } var floatPrecision = 5 @@ -162,24 +162,24 @@ var MX = MX || (function (undefined) { Object.defineProperty(this, 'width', { get: function () { return width - || parseInt(self.el.style.width, 10) * app.devicePixelRatio + || parseInt(self.el.style.width, 10) * app_devicePixelRatio || 0 }, set: function (val) { width = val - this.el.style.width = (width/app.devicePixelRatio) + 'px' + this.el.style.width = (width/app_devicePixelRatio) + 'px' } }) Object.defineProperty(this, 'height', { get: function () { return height - || parseInt(self.el.style.height, 10) * app.devicePixelRatio + || parseInt(self.el.style.height, 10) * app_devicePixelRatio || 0 }, set: function (val) { height = val - this.el.style.height = (height/app.devicePixelRatio) + 'px' + this.el.style.height = (height/app_devicePixelRatio) + 'px' } }) } @@ -302,9 +302,9 @@ var MX = MX || (function (undefined) { + (-this.y).toFixed(floatPrecision) + 'px,' + (-this.z).toFixed(floatPrecision) + 'px) ' + 'scale3d(' - + (app.devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' - + (app.devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' - + (app.devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' + + (app_devicePixelRatio * this.scaleX).toFixed(floatPrecision) + ',' + + (app_devicePixelRatio * this.scaleY).toFixed(floatPrecision) + ',' + + (app_devicePixelRatio * this.scaleZ).toFixed(floatPrecision) + ') ' if (rotationTranslation) { transformString += rotationTranslation.before diff --git a/public/assets/javascripts/vendor/polyfill.js b/public/assets/javascripts/vendor/polyfill.js index 499cbc5..2139618 100644 --- a/public/assets/javascripts/vendor/polyfill.js +++ b/public/assets/javascripts/vendor/polyfill.js @@ -48,7 +48,7 @@ function has3d(){ } else if ( browser.webkit ) { browser.safari = true; } - $.browser = browser; + if (window.$) $.browser = browser; return browser; })( navigator.userAgent ); @@ -58,6 +58,7 @@ var is_ipad = (navigator.userAgent.match(/iPad/i)) var is_android = (navigator.userAgent.match(/Android/i)) var is_mobile = is_iphone || is_ipad || is_android var is_desktop = ! is_mobile; +var app_devicePixelRatio = is_mobile ? devicePixelRatio : 1; // rAF shim diff --git a/public/assets/test/intersect2.html b/public/assets/test/intersect2.html index 3df9f30..9a6deb2 100644 --- a/public/assets/test/intersect2.html +++ b/public/assets/test/intersect2.html @@ -6,9 +6,10 @@ body,html{margin:0;padding:0;}
- - + + + diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html index 5440a76..0db85f0 100644 --- a/public/assets/test/intersect3.html +++ b/public/assets/test/intersect3.html @@ -6,9 +6,10 @@ body,html{margin:0;padding:0;}
- - + + + diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html index 85e3a7b..02be479 100644 --- a/public/assets/test/surface.html +++ b/public/assets/test/surface.html @@ -1,7 +1,7 @@ - + -- cgit v1.2.3-70-g09d2 From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- .../javascripts/mx/extensions/mx.orbitCamera.js | 80 ++++++++++++ public/assets/javascripts/rectangles/util/mouse.js | 8 ++ public/assets/test/orbit.html | 140 +++++++++++++++++++++ public/assets/test/ortho.html | 50 ++------ 4 files changed, 235 insertions(+), 43 deletions(-) create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js create mode 100644 public/assets/test/orbit.html (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js new file mode 100644 index 0000000..b3dcc43 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -0,0 +1,80 @@ +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: PI/2, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + sensitivity: 10, // moving 1 pixel is like moving N radians + ease: 10, + }) + var rx, ry, px, py, epsilon = 1e-10, dragging = false + exports.init = function(){ + ry = opt.rotationY + rx = opt.rotationX + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + opt.el.addEventListener("mousedown", down) + opt.el.addEventListener("mousemove", move) + opt.el.addEventListener("mouseup", up) + } + exports.unbind = function(){ + if (! bound) return; + bound = false + opt.el.removeEventListener("mousedown", down) + opt.el.removeEventListener("mousemove", move) + opt.el.removeEventListener("mouseup", up) + } + function down (e) { + px = e.pageX + py = e.pageY + dragging = true + } + function move (e) { + if (! dragging) return + exports.delta(px- e.pageX, py - e.pageY) + px = e.pageX + py = e.pageY + } + function up (e) { + dragging = false + } + exports.delta = function(x,y){ + opt.rotationY += x/window.innerWidth * opt.sensitivity + opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI) + } + exports.move = function(y, x){ + opt.rotationY = y + if (typeof x == "number") { opt.rotationX = x } + } + exports.update = function(){ + if (abs(ry - opt.rotationY) > epsilon) { + ry = avg(ry, opt.rotationY, opt.ease) + } + else { + ry = opt.rotationY + } + if (abs(rx - opt.rotationX) > epsilon) { + rx = avg(rx, opt.rotationX, opt.ease) + } + else { + rx = opt.rotationX + } + opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + opt.radius * cos(rx) + opt.camera.rotationX = PI/2 - rx + opt.camera.rotationY = ry + PI/2 + } + return exports +} diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index cb36038..86edf6c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -76,6 +76,14 @@ function mouse (opt) { window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } + base.unbind = function(){ + if (opt.el) { + opt.el.removeEventListener("mousedown", base.mousedown) + opt.el.removeEventListener("contextmenu", base.contextmenu) + } + window.removeEventListener("mousemove", base.mousemove) + window.removeEventListener("mouseup", base.mouseup) + } base.bind_el = function(el){ el.addEventListener("mousedown", base.mousedown) diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html new file mode 100644 index 0000000..8b45de6 --- /dev/null +++ b/public/assets/test/orbit.html @@ -0,0 +1,140 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index bd94a51..57e050c 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -32,6 +32,7 @@ body { + @@ -94,43 +95,6 @@ Map.UI.Ortho = function(map){ } }) } -MX.OrbitCamera = function(opt){ - var exports = {}, bound = false - exports.opt = opt = defaults(opt, { - el: window, // object to bind events on - camera: scene.camera, // camera object we'll be moving - radius: 100, - radiusRange: [ 10, 1000 ], - rotationX: 0, - rotationY: 0, - center: { x: 0, y: 0, z: 0 }, - }) - exports.init = function(){ - exports.bind() - } - exports.toggle = function(state){ - if (state) exports.bind() - else exports.unbind() - } - exports.bind = function(){ - if (bound) return; - bound = true - } - exports.unbind = function(){ - if (! bound) return; - bound = false - } - exports.update = function(){ - opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) - opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) - opt.camera.z = opt.radius * cos(opt.rotationY) - opt.camera.rotationX = opt.rotationX - opt.camera.rotationY = PI-opt.rotationY - hud.innerHTML = opt.camera.toString() - } - - return exports -} var scene, map, controls @@ -167,17 +131,17 @@ function polyline (time) { } } document.addEventListener('DOMContentLoaded', build_circle) -function add_mx_point (p) { +function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: 0, + y: i/4, z: p.b, width: 1, - height: 1, + height: i/2, }) - mx.el.style.backgroundColor = "#f80" + mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() @@ -200,11 +164,11 @@ function build_circle () { var theta, rad = 10; for (var i = 0; i < 100; i++) { - theta = (i/TWO_PI) + theta = (i/100 * TWO_PI) add_mx_point({ a: sin(theta) * rad, b: cos(theta) * rad, - }) + }, i) } scene.update() -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + height: i, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() } +function add_center () { + var mx = new MX.Object3D() + mx.width = 79 + mx.height = 64 + mx.y = 32 * 0.05 + mx.scale = 0.05 + mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)" + scene.add(mx) +} function build_circle () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ map.draw.translate() map.draw.coords() + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From cbc0e733553648f24c8c0256caee36d1e4f24ce1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:08:43 -0500 Subject: build MX divs from polyline --- .../javascripts/mx/extensions/mx.orbitCamera.js | 3 +- public/assets/test/ortho.html | 107 +++++++++++++++++---- 2 files changed, 88 insertions(+), 22 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b09512e..6dc5b6c 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){ rotationY: 0, center: { x: 0, y: 0, z: 0 }, sensitivity: 10, // moving 1 pixel is like moving N radians + wheelSensitivity: 10, ease: 10, }) var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false @@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){ exports.wheel = new wheel({ el: opt.el, update: function(e, delta){ - opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] ) }, }) exports.bind() diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index b00b6fe..041ec3f 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){ 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.length = 0 + points.length = mx_points.length = 0 points.push( p ) + mx_points.push( add_mx_point(p) ) } - add_mx_point(p) }, move: function(e, cursor){ cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) @@ -104,10 +106,11 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, + zoom: 0, }) var placing = false -var points = [] +var points = [], mx_points = [] var ctx = map.draw.ctx var last_point @@ -119,6 +122,7 @@ function polyline (time) { if (points.length > 1) { ctx.fillStyle = "#ff0" ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() ctx.moveTo(points[0].a, points[0].b) points.forEach(function(point, i){ @@ -131,24 +135,80 @@ function polyline (time) { } } } -document.addEventListener('DOMContentLoaded', build_circle) + +function add_mx_polyline (points) { + mx_points.forEach(function(mx){ scene.remove(mx) }) + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i % (points.length-1)] + add_mx_polyline_face(head, tail) + } +} +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: 25 + 1, + z: mid_z / 2, + width: ceil(len), + height: 50, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) +} + + function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: 11, z: p.b, - width: 1, - height: i/2, + width: 20, + height: 20, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) - mx.update() + return mx +} +function mx_grid () { + var space = 20, cells = 20, side = space*cells + var ctx, canvas = document.createElement("canvas") + canvas.width = canvas.height = side + 4 + ctx = canvas.getContext('2d') + + draw_grid(ctx, 20, 20) + + var mx = new MX.Object3D(canvas) + mx.rotationX = PI/2 + scene.add(mx) +} +function draw_grid (ctx, cells, space) { + var side = space * cells + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.stroke() } -function build_circle () { +document.addEventListener('DOMContentLoaded', build) +function build () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ "x": 0, @@ -163,21 +223,17 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; - for (var i = 0; i < 100; i++) { - theta = (i/100 * TWO_PI) - add_mx_point({ - a: sin(theta) * rad, - b: cos(theta) * rad, - }, i) - } - + mx_grid() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ + radius: 1000, + rotationX: PI/4, + rotationY: PI/2, + }) controls.init() - console.log("ready..perhaps") animate(0) } function animate(time){ @@ -190,10 +246,19 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() + map.draw.ctx.save() + map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) + draw_grid(map.draw.ctx, 20, 20) + map.draw.ctx.restore() + map.draw.coords() + + polyline() + + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - polyline() map.draw.ctx.restore() } -- cgit v1.2.3-70-g09d2 From 3832685358c9d3ad3e0aead51228f29255702007 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 13:23:33 -0400 Subject: setVolume functions --- public/assets/javascripts/mx/primitives/mx.video.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.vimeo.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.youtube.js | 5 +++++ public/assets/javascripts/rectangles/engine/scenery/types/video.js | 4 ++++ 4 files changed, 19 insertions(+) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c281f02..9138cdd 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -87,6 +87,11 @@ MX.Video = MX.Object3D.extend({ this.muted = false }, + setVolume: function(n){ + if (this.muted) return + this.player.volume = n + }, + setLoop: function(state){ this.media.loop = state }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index fe5ce86..bff781b 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -130,6 +130,11 @@ MX.Vimeo = MX.Object3D.extend({ this.player.api('setVolume', 0.8) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.api('setVolume', n) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 5c92378..fad66dd 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -173,6 +173,11 @@ MX.Youtube = MX.Object3D.extend({ this.player.setVolume(80) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.setVolume( floor(n * 100) ) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index d1b1763..fb1a868 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -90,6 +90,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ } }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + serialize: function(){ var data = base.serialize.call(this) return data -- cgit v1.2.3-70-g09d2 From 0a67e7f8ab74f82212a123dd6c30903124c1e8df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 17:08:47 -0400 Subject: sound interpolation --- .../assets/javascripts/mx/primitives/mx.soundcloud.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.video.js | 2 +- public/assets/javascripts/mx/primitives/mx.vimeo.js | 2 +- public/assets/javascripts/mx/primitives/mx.youtube.js | 2 +- .../javascripts/rectangles/engine/scenery/_scenery.js | 1 + .../javascripts/rectangles/engine/scenery/sound.js | 17 +++++++++++++++++ .../rectangles/engine/scenery/types/audio.js | 4 ++++ views/partials/scripts.ejs | 1 + 8 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/sound.js (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js index 75286d9..fecb2f4 100644 --- a/public/assets/javascripts/mx/primitives/mx.soundcloud.js +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -102,6 +102,11 @@ MX.Soundcloud = MX.Object3D.extend({ setLoop: function(state){ this.media.loop = state }, + + setVolume: function(n){ + if (this.muted || ! this.player) return + this.player.setVolume(floor( n * 100 )) + }, didPlay: function(){ this.paused = false diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 9138cdd..43c392a 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -88,7 +88,7 @@ MX.Video = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.volume = n }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index bff781b..ccd0a13 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -132,7 +132,7 @@ MX.Vimeo = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.api('setVolume', n) }, diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index fad66dd..e4e73d6 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -175,7 +175,7 @@ MX.Youtube = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player || ! this.player.setVolume) return this.player.setVolume( floor(n * 100) ) }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d52fe21..18d665f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -11,6 +11,7 @@ var Scenery = new function(){ base.init = function(){ base.resize.init() + base.sound.init() } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js new file mode 100644 index 0000000..2f7f8de --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -0,0 +1,17 @@ + +Scenery.sound = {} +Scenery.sound.max_distance = 600 +Scenery.sound.init = function(){ + app.tube.on("move", Scenery.sound.move) +} +Scenery.sound.move = function(){ + var vals = Scenery.map(function(scenery){ + if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { + //get distance from A to B + var distance = dist(cam.x, cam.z, + scenery.mx.x, scenery.mx.z) + var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) + scenery.setVolume(volume) + } + }) +} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js index 82f984e..fdd221d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -39,6 +39,10 @@ Scenery.types.audio = Scenery.types.base.extend(function(base){ this.dimensions.deserialize(data.dimensions) }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + play: function(){ this.mx.play() }, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 011644b..72aaa8c 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -65,6 +65,7 @@ + -- cgit v1.2.3-70-g09d2 From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 20:25:45 -0400 Subject: split out mx.grid --- public/assets/javascripts/mx/primitives/mx.grid.js | 60 +++++++ .../javascripts/rectangles/engine/map/ui_ortho.js | 65 +++++++ .../javascripts/rectangles/engine/scenery/move.js | 3 +- public/assets/test/ortho2.html | 200 +++++++++++++++++++++ 4 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.grid.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js create mode 100644 public/assets/test/ortho2.html (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js new file mode 100644 index 0000000..7a40144 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -0,0 +1,60 @@ +MX.Grid = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Grid" + + var ops = this.ops = defaults(ops, { + x: 0, + y: 0, + z: 0, + space: 20, + cells: 20, + }) + + ops.side = ops.space * ops.cells + + var ctx, canvas = document.createElement("canvas") + + this.el = canvas + this.width = this.height = canvas.width = canvas.height = ops.side + 4 + + ctx = canvas.getContext('2d') + + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = PI/2 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-grid") + + this.draw(ctx) + }, + + draw: function(ctx){ + ctx = ctx || this.ctx + + var cells = this.ops.cells, + space = this.ops.space, + side = this.ops.side + + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.closePath() + ctx.stroke() + }, + +}) + + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js new file mode 100644 index 0000000..adff4d2 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,65 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + // 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) ) + } + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + 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" + } + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 0d26582..dd60a61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -82,7 +82,7 @@ Scenery.move = function(base){ base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } - console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) + if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -105,7 +105,6 @@ Scenery.move = function(base){ dragging = moved = false oldState = null document.body.classList.remove("dragging") - } function switch_wall (e, target, cursor){ diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 744b4f00e9c8a7ef8a75cc8508bf10c0da8de9cc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:27:07 -0400 Subject: plotting points on an image of an art gallery --- public/assets/javascripts/mx/primitives/mx.grid.js | 12 ++++++++++- .../assets/javascripts/mx/primitives/mx.image.js | 24 ++++++++++++++++++++- public/assets/test/ortho2.html | 25 +++++++++++++++------- 3 files changed, 51 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js index 7a40144..a765c89 100644 --- a/public/assets/javascripts/mx/primitives/mx.grid.js +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({ this.draw(ctx) }, - draw: function(ctx){ + draw: function(ctx, recenter){ ctx = ctx || this.ctx + + if (recenter) { + ctx.save() + ctx.translate( -grid.width/2, -grid.height/2 ) + } var cells = this.ops.cells, space = this.ops.space, @@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({ } ctx.closePath() ctx.stroke() + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index b8557bf..ca79065 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,6 +1,5 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { - this.type = "Image" this.media = ops.media this.width = 0 @@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({ layer.el.classList.add('image') layer.dirty = true layer.update() + layer.ops.onload } image.src = ops.src; + + if (ops.keepImage) { + this.image = image + } + }, + + draw: function(ctx, recenter){ + if (recenter) { + ctx.save() + ctx.scale(-1, 1) + ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale ) + } + + ctx.drawImage(this.image, + 0, 0, this.image.naturalWidth, this.image.naturalHeight, + 0, 0, this.image.width * this.scale, this.image.height * this.scale + ) + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index d554a60..733c90c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -34,6 +34,7 @@ body { + @@ -53,7 +54,7 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, - zoom: 0, + zoom: -2, }) var placing = false @@ -127,9 +128,11 @@ function add_mx_point (p, i) { 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 } @@ -143,14 +146,22 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight - grid = new MX.Grid() - scene.add(grid) +// grid = new MX.Grid() +// scene.add(grid) + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) scene.update() controls = new MX.OrbitCamera({ el: scene.el, - radius: 1000, + radius: 3000, + radiusRange: [ 10, 10000 ], rotationX: PI/4, rotationY: PI/2, }) @@ -168,10 +179,8 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() - map.draw.ctx.save() - map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) - grid.draw(map.draw.ctx, 20, 20) - map.draw.ctx.restore() +// grid.draw(map.draw.ctx, true) + floorplan.draw(map.draw.ctx, true) map.draw.coords() -- cgit v1.2.3-70-g09d2 From 30ee4d90d5fc89880ef0801aa078f26eeb26f155 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 17:02:43 -0400 Subject: toggle keyboard/orbit cam --- public/assets/javascripts/defaults.js | 3 +- .../javascripts/mx/extensions/mx.movements.js | 18 ++++--- .../javascripts/mx/extensions/mx.orbitCamera.js | 1 + public/assets/test/ortho2.html | 56 ++++++++++++++++++++-- 4 files changed, 66 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 12aed62..413bb13 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,3 +1,4 @@ +app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, units: app.units = "ft", @@ -13,7 +14,7 @@ app.defaults = { }, } -marked.setOptions({ +window.marked && marked.setOptions({ sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 9af2c8d..bc71fc4 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -39,7 +39,7 @@ MX.Movements = function (cam) { }) function clampRotation( vr ) { - if (Rooms.mover.noclip) { + if (window.Rooms && Rooms.mover.noclip) { return clamp(vr, PI/-2, PI/2 ) } else { @@ -221,15 +221,19 @@ MX.Movements = function (cam) { /* case 48: // 0 - cam.rotationX = 0 - cam.rotationY = 0 - cam.x = 0 - cam.y = viewHeight - cam.z = 0 + movements.center() break */ } }, + + center: function(){ + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + }, mousedown: function (e) { if (locked) return; @@ -341,7 +345,7 @@ MX.Movements = function (cam) { jumping = false } - var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000) + var ceiling = ((window.Rooms && Rooms.mover.room) ? Rooms.mover.room.height : 5000) if (pos.y >= ceiling-5) { vy = 0 diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index 6dc5b6c..f4759fb 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -68,6 +68,7 @@ MX.OrbitCamera = function(opt){ if (typeof x == "number") { opt.rotationX = x } } exports.update = function(){ + if (! bound) return if (abs(ry - opt.rotationY) > epsilon) { ry = avg(ry, opt.rotationY, opt.ease) } diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 89a5688..d6f0c5c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -1,3 +1,4 @@ +
@@ -29,9 +32,12 @@ body {
+ +
+ @@ -40,6 +46,7 @@ body { + @@ -53,6 +60,11 @@ body { + @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false +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){}, + } + return exports +}) - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) +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 +}) - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return +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 } - 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 - base.mouse.down = false - e.preventDefault() - e.stopPropagation() 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 ) + // 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) ) - } - }, - move: function(e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - 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" - } - }, - drag: function(e, cursor){ - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - }, - up: function(e, cursor, new_cursor){ - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} - + } + } + 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 @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + 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 diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +
-
+
+ + + +
+ +
+ + + +
+ + + + - - + + @@ -68,8 +70,13 @@ body { - + + + + + + - - + + -- cgit v1.2.3-70-g09d2 From 71c3a4a02c7c46533aec836ef30a0d0ffa96399b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 18:20:22 -0400 Subject: layout stuff --- .../javascripts/mx/extensions/mx.movements.js | 6 +- .../assets/javascripts/mx/primitives/mx.image.js | 3 +- .../rectangles/engine/map/tools/ortho.js | 26 +- .../rectangles/engine/map/tools/polyline.js | 24 +- .../rectangles/engine/shapes/shapelist.js | 1 + public/assets/javascripts/ui/lib/Toolbar.js | 22 ++ public/assets/javascripts/ui/site/StaffView.js | 26 +- public/assets/test/ortho3.html | 38 +-- public/assets/test/ortho4.html | 261 +++++++++++++++++++++ server/lib/middleware.js | 2 +- server/lib/schemas/Media.js | 1 + server/lib/views/staff.js | 3 +- views/staff/_layouts.ejs | 2 +- views/staff/layouts/show.ejs | 4 +- 14 files changed, 352 insertions(+), 67 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/Toolbar.js create mode 100644 public/assets/test/ortho4.html (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index fa59908..9ed8790 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -162,13 +162,13 @@ MX.Movements = function (cam) { case 8: // backspace e.preventDefault() - if (app.controller.sculptureEditor.sculpture) { + if (app.controller.sculptureEditor && app.controller.sculptureEditor.sculpture) { app.controller.sculptureEditor.sculpture.remove() } - else if (app.controller.mediaEditor.scenery) { + else if (app.controller.mediaEditor && app.controller.mediaEditor.scenery) { app.controller.mediaEditor.scenery.remove() } - else if (app.controller.textEditor.scenery) { + else if (app.controller.textEditor && app.controller.textEditor.scenery) { app.controller.textEditor.scenery.remove() } } diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 64de4b2..f9de141 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -17,7 +17,7 @@ MX.Image = MX.Object3D.extend({ this.el.style.backgroundRepeat = 'no-repeat' - this.load(ops) + ops.src && this.load(ops) }, load: function(ops){ @@ -64,7 +64,6 @@ MX.Image = MX.Object3D.extend({ if (recenter) { ctx.restore() } - }, }) diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index be3d707..ef41096 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -12,11 +12,11 @@ var OrthoPolylineTool = MapTool.extend(function (base) { if (map.ui.placing) { // close polyline or cancel map.ui.placing = false - if (line.points.length > 2) { - line.build() + if (shapes.workline.points.length > 2) { + shapes.workline.build() } else { - line.reset() + shapes.workline.reset() } return } @@ -29,24 +29,24 @@ var OrthoPolylineTool = MapTool.extend(function (base) { // compare to initial point var p = last_point.clone() if (map.ui.placing) { - if (line.lastPoint().eq(p)) { + if (shapes.workline.lastPoint().eq(p)) { return } - else if (line.canCloseWith(p)) { - line.close() - line.build() + else if (shapes.workline.canCloseWith(p)) { + shapes.workline.close() + shapes.workline.build() map.ui.placing = false } else { - line.add(p) + shapes.workline.add(p) prev_point = p horizontal = ! horizontal } } else { map.ui.placing = true - line = new Polyline () - line.add(p) + shapes.workline = new Polyline () + shapes.workline.add(p) first_point = prev_point = p horizontal = false } @@ -55,7 +55,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { last_point.a = cursor.x.a last_point.b = cursor.y.a if (map.ui.placing) { - if (line.points.length == 1) { + if (shapes.workline.points.length == 1) { var x = abs(prev_point.a - last_point.a) var y = abs(prev_point.b - last_point.b) if (x > y) { @@ -86,7 +86,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } } - if (line.canCloseWith(last_point)) { + if (shapes.workline.canCloseWith(last_point)) { document.body.style.cursor = "pointer" last_point.assign(first_point) cursor.x.a = cursor.x.b = last_point.a @@ -107,7 +107,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } } exports.cancel = function(){ - if (map.ui.placing) { line.reset() } + if (map.ui.placing) { shapes.workline.reset() } first_point = null map.ui.placing = false } diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 559aea8..1ab86f6 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -9,11 +9,11 @@ var PolylineTool = MapTool.extend(function (base) { if (map.ui.placing) { // close polyline or cancel map.ui.placing = false - if (line.points.length > 2) { - line.build() + if (shapes.workline.points.length > 2) { + shapes.workline.build() } else { - line.reset() + shapes.workline.reset() } return } @@ -24,27 +24,27 @@ var PolylineTool = MapTool.extend(function (base) { // compare to initial point var p = last_point.clone() if (map.ui.placing) { - if (line.canCloseWith(p)) { - line.close() - line.build() + if (shapes.workline.canCloseWith(p)) { + shapes.workline.close() + shapes.workline.build() map.ui.placing = false } else { - line.add(p) + shapes.workline.add(p) } } else { map.ui.placing = true - line = new Polyline () - line.add(p) + shapes.workline = new Polyline () + shapes.workline.add(p) } } exports.move = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - if (map.ui.placing && line.canCloseWith(last_point)) { + if (map.ui.placing && shapes.workline.canCloseWith(last_point)) { document.body.style.cursor = "pointer" - last_point.assign(line.points[0]) + last_point.assign(shapes.workline.points[0]) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b return @@ -62,7 +62,7 @@ var PolylineTool = MapTool.extend(function (base) { } } exports.cancel = function(){ - if (map.ui.placing) { line.reset() } + if (map.ui.placing) { shapes.workline.reset() } map.ui.placing = false } return exports diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 00e1a4e..932ce36 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -2,6 +2,7 @@ var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ this.shapes = [] + this.workline = null } exports.add = function(shape){ this.shapes.push(shape) diff --git a/public/assets/javascripts/ui/lib/Toolbar.js b/public/assets/javascripts/ui/lib/Toolbar.js new file mode 100644 index 0000000..a9ce51c --- /dev/null +++ b/public/assets/javascripts/ui/lib/Toolbar.js @@ -0,0 +1,22 @@ +var Toolbar = Fiber.extend(function(base){ + var exports = {} + exports.init = function(rapper){ + this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper + this.tools = {} + this.els = {} + } + exports.add = function(role, fn){ + var self = this + this.tools[role] = fn + this.els[role] = $("[data-role=" + role + "]", self.rapper) + this.els[role].click(function(){ + $(".active", self.rapper).removeClass('active') + $(this).addClass('active') + fn() + }) + } + exports.pick = function(role){ + this.els[role].trigger("click") + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js index 0398f71..59649e3 100644 --- a/public/assets/javascripts/ui/site/StaffView.js +++ b/public/assets/javascripts/ui/site/StaffView.js @@ -4,11 +4,13 @@ var StaffView = View.extend({ events: { "click #toggle-staff": "toggleStaff", "click #toggle-featured": "toggleFeatured", + "click #toggle-stock": "toggleStock", }, initialize: function() { this.$toggleStaff = $("#toggle-staff") this.$toggleFeatured = $("#toggle-featured") + this.$toggleStock = $("#toggle-stock") this.$mediaEmbed = $("#media-embed") if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) { this.$toggleStaff.html("Is Staff") @@ -16,6 +18,9 @@ var StaffView = View.extend({ if (this.$toggleFeatured.length && this.$toggleFeatured.data().featured) { this.$toggleFeatured.html("Featured Project") } + if (this.$toggleStock.length && this.$toggleStock.data().stock) { + this.$toggleStock.html("Layout is Stock") + } if (this.$mediaEmbed.length) { var media = this.$mediaEmbed.data() this.$mediaEmbed.html( Parser.tag( media ) ) @@ -67,6 +72,25 @@ var StaffView = View.extend({ $("#isFeaturedProject").html(data.state ? "yes" : "no") }.bind(this) }) - }, + }, + + toggleStock: function(){ + console.log("stock") + var state = ! this.$toggleStock.data().stock + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/stock", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleStock.data("stock", data.state) + this.$toggleStock.html(data.state ? "Stock Layout" : "Make this layout Stock") + $("#isStockLayout").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, }) diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index ef5732c..f41a0ba 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -80,6 +80,7 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@ -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
[[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


- +

-- cgit v1.2.3-70-g09d2 From 554463ca8e8492bfd5f0f496e3a2291bfb495f80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 18:49:29 -0400 Subject: blueprint scaler stuff --- .../assets/javascripts/mx/primitives/mx.image.js | 17 ++- .../javascripts/ui/blueprint/BlueprintScaler.js | 34 +++++- .../javascripts/ui/blueprint/BlueprintUpload.js | 5 +- public/assets/stylesheets/app.css | 89 +++++++++++++++ public/assets/test/ortho4.html | 2 + views/controls/blueprint/editor.ejs | 120 +++++---------------- 6 files changed, 163 insertions(+), 104 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index f9de141..33b1373 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,5 +1,7 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { + ops = ops || {} + this.type = "Image" this.media = ops.media this.width = 0 @@ -41,15 +43,20 @@ MX.Image = MX.Object3D.extend({ layer.dirty = true layer.update() layer.ops.onload + + if (ops.keepImage) { + layer.image = image + } } - image.src = ops.src; - - if (ops.keepImage) { - this.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 }, draw: function(ctx, recenter){ + if (! this.image) { return } + if (recenter) { ctx.save() ctx.scale(-1, 1) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index e11b61e..a81c89b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -18,7 +18,7 @@ var BlueprintScaler = ModalView.extend({ this.map = map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), - width: window.innerWidth/2, + width: window.innerWidth, height: window.innerHeight, zoom: -2, zoom_min: -6.2, @@ -27,10 +27,38 @@ var BlueprintScaler = ModalView.extend({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("position", new PositionTool) map.ui.set_tool("position") + + scene = scene || { camera: { x: 0, y: 0, z: 0 } } + + this.floorplan = new MX.Image () + + this.animate() }, - pick: function(){ - + pick: function(media){ + this.floorplan.load({ media: media, keepImage: true }) + }, + + animate: function(t){ + requestAnimationFrame(this.animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.map.update(t) + + this.map.draw.ctx.save() + this.map.draw.translate() + + this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.coords() + + this.map.draw.mouse(this.map.ui.mouse.cursor) + + this.map.draw.ctx.restore() }, changeDimensions: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index deb1075..498575a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -36,8 +36,9 @@ var BlueprintUpload = UploadView.extend({ this.loaded = true if (data && data.length) { this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.blueprintScaler.pick(data[0]) } else { this.show() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0f89242..6507cc1 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -3253,6 +3253,95 @@ a[data-role="forgot-password"] { } +/* blueprint upload box */ + +.blueprintUpload { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; +} +.blueprints .blueprint { + border: 2px solid black; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { + height: 100px; + max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: -2px 2px #000; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border: 1px solid black; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; + cursor: pointer; +} + + /* KEYBOARD SHORTCUTS */ .keyboard { float: left; width: 50%; margin-top: 50px; } diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 1c1adef..d704e0e 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -160,7 +160,9 @@ 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 wall_height = 180 diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index aec5e25..308b4c8 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -32,90 +32,20 @@ body { .hud span { color: #888; cursor: pointer; } .hud span.active { color: #000; } -.blueprintUpload { - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - width: 340px; - position: absolute; - top: 50%; left: 50%; - background: white; - padding: 10px; - border: 1px solid black; - box-shadow: -3px 3px #000; - -webkit-transform: translate3D(0%,-200%,0); - transform: translate3D(0%,-200%,0); - margin-left: -175px; - margin-top: -200px; - opacity: 0; -} -.blueprintUpload.active { - -webkit-transform: translate3D(0,0,0); - transform: translate3D(0,0,0); - opacity: 1; -} -.blueprintUpload .toolButton { - float: none; - width: 108px; - display: inline-block; -} -.blueprintUpload .url { - font-size: 15px; - border: 1px solid #888; - padding: 2px; - font-weight: 300; - position: relative; - top: 3px; - margin-right: 10px; - width: 190px; -} -.blueprintUpload p { - font-weight: 300; +.blueprintInfo { + bottom: 14px; + left: 10px; + width: 270px; font-size: 13px; + font-weight: 300; + padding: 10px; } -.blueprintUpload .blueprints { - display: none; -} -.blueprintUpload .blueprints h5 { - width: 250px; - margin: 10px auto; - padding-top: 9px; -} -.blueprints .blueprint { - border: 1px solid black; - background: white; - padding: 0px; - position: relative; - display: inline-block; -} -.blueprints .blueprint img { - height: 100px; - max-width: 200px; - display: block; - cursor: pointer; -} -.blueprints .blueprint .remove { - box-shadow: 0 1px 2px #888; - cursor: pointer; - position: absolute; - color: red; - top: 7px; - right: 7px; - width: 20px; height: 20px; - text-align: center; - background: #fff; - border-radius: 50%; -} -.blueprints .blueprint .remove span { - position: relative; - top: -2px; -} -.blueprintUpload .wallpaperUpload .upload-icon { - margin: 0 4px; +.blueprintInfo .setting { + margin-bottom: 20px; } -.uploadNewBlueprint { - color: #333; - border-bottom: 1px solid; - cursor: pointer; +.blueprintInfo .setting.number input[type=text] { + width: 100px; + font-size: 16px; } @@ -139,7 +69,7 @@ body {
- +

Upload your Blueprint

@@ -161,25 +91,27 @@ body {

-
+
Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. + Click two corners of a wall, and then enter how long the wall is.

- Do you want to upload a blueprint? + You can also upload another blueprint. +

+ +
+ + + +
+
-
- - - - -
-- cgit v1.2.3-70-g09d2 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 (limited to 'public/assets/javascripts/mx') 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 From 46980b02b80ea94a9df57dc304d204e6feec0476 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 16:35:04 -0400 Subject: resizing stuff and orbitcamera fix --- .../javascripts/mx/extensions/mx.orbitCamera.js | 4 ++-- .../javascripts/ui/blueprint/BlueprintEditor.js | 26 ++++++++++++++-------- .../javascripts/ui/blueprint/BlueprintToolbar.js | 8 +++---- .../javascripts/ui/blueprint/BlueprintView.js | 3 ++- 4 files changed, 25 insertions(+), 16 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index f4759fb..a936cef 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -88,8 +88,8 @@ MX.OrbitCamera = function(opt){ radius = opt.radius } opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + radius * cos(rx) + opt.camera.y = opt.center.y + radius * cos(rx) + opt.camera.z = opt.center.z + radius * sin(rx) * sin(ry) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index cc469b6..72c129a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -8,14 +8,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ initialize: function(opt){ this.parent = opt.parent -/* - $(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 - }) -*/ + $(window).resize(this.resize.bind(this)) scene = new MX.Scene().addTo("#perspective") scene.camera.radius = 20 @@ -48,7 +41,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ 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 + controls.opt.center.z = z }, true) scene.update() @@ -63,6 +56,21 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ controls.init() }, + resize: function(){ + if (this.parent.orbiting) { + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2 + this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight + this.parent.map.canvas.style.display = "block" + } + else { + scene.width = window.innerWidth + scene.height = window.innerHeight + this.parent.map.canvas.style.display = "none" + } + }, + loadFloorplan: function(media){ // console.log(media) this.floorplan.load({ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index a21a0ef..5f313fd 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -29,11 +29,11 @@ var BlueprintToolbar = View.extend({ this.parent.uploader.show() }, - orbiting: true, toggleOrbitMode: function(){ - this.orbiting = ! this.orbiting - this.$toggleOrbitMode.toggleClass("inuse", ! this.orbiting) - if (this.orbiting) { + this.parent.orbiting = ! this.parent.orbiting + this.$toggleOrbitMode.toggleClass("inuse", ! this.parent.orbiting) + this.parent.editor.resize() + if (this.parent.orbiting) { controls.toggle(true) movements.lock() } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 4cb9138..e84fc30 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -30,7 +30,8 @@ var BlueprintView = View.extend({ $.get(this.action + name, this.ready.bind(this)) }, - + + orbiting: true, buildMap: function(){ // i forget if this has to be global map = new Map ({ -- cgit v1.2.3-70-g09d2 From 72afc148b11ac57c991d699c205675b4b0f1cf70 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 19:35:02 -0400 Subject: set wall height --- public/assets/javascripts/defaults.js | 1 + .../javascripts/mx/primitives/mx.polyline.js | 11 +++++++++-- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 2 +- .../javascripts/ui/blueprint/BlueprintInfo.js | 23 ++++++++-------------- .../javascripts/ui/blueprint/BlueprintScaler.js | 4 ++-- .../javascripts/ui/blueprint/BlueprintView.js | 7 ++----- public/assets/test/ortho2.html | 6 +++--- public/assets/test/ortho3.html | 2 +- public/assets/test/ortho4.html | 2 +- views/controls/blueprint/info.ejs | 2 -- 11 files changed, 29 insertions(+), 33 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 413bb13..1e1ac5b 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,6 +1,7 @@ app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, + wallHeight: 397, units: app.units = "ft", footResolution: 36, meterResolution: 100, diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js index 555b3c6..63c0ef8 100644 --- a/public/assets/javascripts/mx/primitives/mx.polyline.js +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -28,16 +28,23 @@ MX.Polyline = MX.Object3D.extend({ var angle = atan2( head.b - tail.b, head.a - tail.a ) mx.move({ x: mid_x / 2, - y: wall_height/2 + 1, + y: wallHeight/2 + 1, z: mid_z / 2, width: ceil(len), - height: wall_height, + height: wallHeight, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' }, + set_height: function(height){ + for (var i = 0; i < this.faces.length; i++) { + this.faces[i].height = height + this.faces[i].y = height / 2 + 1 + } + }, + destroy: function(){ this.faces.forEach(function(mx){ scene.remove(mx) diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index e3d7621..2aee962 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -51,7 +51,7 @@ var Map = function(opt){ case "ortho": base.draw = new Map.Draw (base, { ortho: true }) base.ui = new Map.UI.Ortho (base) - base.sides = base.sides_for_camera + base.sides = base.sides_for_center $(window).resize(base.resize) break diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 72c129a..73f21c0 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -1,5 +1,5 @@ -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var last_point = new vec2 (0,0) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js index ad462ae..6dd6a7d 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js @@ -5,15 +5,16 @@ var BlueprintInfo = View.extend({ events: { "mousedown": "stopPropagation", "keydown": 'stopPropagation', + "change [name=height]": 'changeHeight', "keydown [name=height]": 'enterHeight', "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', - "click [data-role=destroy-room]": 'destroy', }, initialize: function(opt){ this.parent = opt.parent + this.$height = this.$("[name=height]") this.$units = this.$("[name=units]") this.$viewHeight = this.$("[name=viewHeight]") this.$unitName = this.$(".unitName") @@ -21,8 +22,10 @@ var BlueprintInfo = View.extend({ load: function(data){ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) + this.$height.unitVal( window.wallHeight = data.wallHeight || app.defaults.wallHeight ) this.$units.val( data.units ) this.$unitName.html( data.units ) + this.show() }, toggle: function(state){ @@ -35,17 +38,10 @@ var BlueprintInfo = View.extend({ }, hide: function(){ - this.room = null this.toggle(false) }, - - room: null, - - pick: function(room){ - }, deselect: function(){ - this.room = null this.toggle(true) }, @@ -54,13 +50,10 @@ var BlueprintInfo = View.extend({ }, changeHeight: function(e){ e.stopPropagation() - var height = this.room.height = this.$height.unitVal() - if (window.heightIsGlobal) { - Rooms.forEach(function(room){ - room.height = height - }) - } - Rooms.rebuild() + window.wallHeight = this.$height.unitVal() + shapes.forEach(function(line){ + line.mx.set_height( window.wallHeight ) + }) }, changeUnits: function(){ app.units = this.$units.val() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 0f2fdcd..5bd2229 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -48,7 +48,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ this.floorplan.load({ media: media, scale: 1, keepImage: true }) if (!! media.units && ! shouldEdit) { - this.parent.useFloorplan(media) + this.parent.ready(media) this.hide() this.stopAnimating() return @@ -149,7 +149,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ success: function(){ this.media.scale = this.$dimensions.unitVal() / this.lineLength() this.stopAnimating() - this.parent.useFloorplan(this.media) + this.parent.ready(this.media) this.hide() }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a59f44f..f919cc7 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -54,16 +54,13 @@ var BlueprintView = View.extend({ ready: function(data){ // this.settings.load(data) -// this.info.load(data) + this.info.load(data) + this.editor.loadFloorplan(data) }, hideExtras: function(){ }, - useFloorplan: function(media){ - this.editor.loadFloorplan(media) - }, - pickWall: function(wall, pos){ }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 013c75b..448f029 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -167,7 +167,7 @@ $(window).resize(function(){ map.canvas.width = map.dimensions.a = window.innerWidth/2 }) -var wall_height = 180 +var wallHeight = 180 var placing = false var points, mx_points = [] var shapes = [] @@ -219,10 +219,10 @@ function add_mx_polyline_face(head, tail){ var angle = atan2( head.b - tail.b, head.a - tail.a ) mx.move({ x: mid_x / 2, - y: wall_height/2 + 1, + y: wallHeight/2 + 1, z: mid_z / 2, width: ceil(len), - height: wall_height, + height: wallHeight, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f41a0ba..71e43f1 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -112,7 +112,7 @@ $(window).resize(function(){ map.canvas.width = map.dimensions.a = window.innerWidth/2 }) -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var ctx = map.draw.ctx var last_point = new vec2 (0,0) diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index d704e0e..8db7ead 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -165,7 +165,7 @@ $(window).resize(function(){ map.canvas.height = map.dimensions.b = window.innerHeight/2 }) -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var ctx = map.draw.ctx var last_point = new vec2 (0,0) diff --git a/views/controls/blueprint/info.ejs b/views/controls/blueprint/info.ejs index f994629..9f7d708 100644 --- a/views/controls/blueprint/info.ejs +++ b/views/controls/blueprint/info.ejs @@ -4,8 +4,6 @@
- -
-- cgit v1.2.3-70-g09d2 From a9bee350c2bb468c9abc46321b46f5c5dcbbe10d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 12:28:44 -0400 Subject: grayscale buildings --- public/assets/javascripts/mx/primitives/mx.polyline.js | 6 ++++-- public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js index 63c0ef8..e549150 100644 --- a/public/assets/javascripts/mx/primitives/mx.polyline.js +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -34,8 +34,10 @@ MX.Polyline = MX.Object3D.extend({ height: wallHeight, rotationY: angle }) - var hue = abs(round( angle / PI * 90 + 300)) - mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + // var hue = abs(round( angle / PI * 90 + 300)) + // mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + var lum = abs(round( angle / PI * 20 + 70)) + mx.el.style.backgroundColor = 'hsla(' + ["0", "0%", lum + "%", "0.99"] + ')' }, set_height: function(height){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 547cdca..4b80b2c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -118,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // - map.draw.regions(this.regions, colors, "#000") +// map.draw.regions(this.regions, colors, "#000") // this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From e350f13c3772d0f1f4053ce3c1a1dbc43713e4d0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 14:32:59 -0400 Subject: map stuff for shapes mode --- public/assets/javascripts/mx/extensions/mx.movements.js | 2 +- public/assets/javascripts/rectangles/engine/map/draw.js | 8 +++++++- public/assets/javascripts/rectangles/engine/shapes/polyline.js | 10 +++++----- .../assets/javascripts/rectangles/engine/shapes/shapelist.js | 5 +++++ public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 4 +--- 5 files changed, 19 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 9ed8790..cecba7a 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -155,7 +155,7 @@ MX.Movements = function (cam) { app.controller.presets.hide() $(".inuse").removeClass("inuse") } - else { + else if (! Rooms.shapesMode) { app.controller.toolbar.toggleMap() } break diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index c97603b..8498a46 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -22,7 +22,13 @@ Map.Draw = function(map, opt){ ctx.scale( -1, 1 ) draw.coords() - draw.regions(Rooms.regions, [ "#fff" ], "#000") + if (Rooms.shapesMode) { + shapes.draw(draw.ctx, "#fff", null) + shapes.draw(draw.ctx, null, "#000") + } + else { + draw.regions(Rooms.regions, [ "#fff" ], "#000") + } draw.camera(scene.camera) } else { diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 54e11c6..fc6cad7 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -95,7 +95,7 @@ var Polyline = Fiber.extend(function(base){ tail: closest_i, } } - exports.draw = function(ctx){ + exports.draw = function(ctx, fillStyle, strokeStyle){ var points = this.points if (! points.length) return if (points.length == 1) { @@ -103,17 +103,17 @@ var Polyline = Fiber.extend(function(base){ map.draw.dot_at(this.points[0].a, points[0].b, 5) } if (points.length > 1) { - ctx.fillStyle = "rgba(255,255,0,0.1)" - ctx.strokeStyle = "#f80" + ctx.fillStyle = fillStyle + ctx.strokeStyle = strokeStyle 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() + strokeStyle && ctx.stroke() if (! map.ui.placing || this.closed) { - ctx.fill() + fillStyle && ctx.fill() } } } diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 9cbf165..75ecae6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -76,6 +76,11 @@ var ShapeList = Fiber.extend(function(base){ }) return segments } + exports.draw = function(ctx, fillStyle, strokeStyle) { + this.shapes.forEach(function(shape){ + shape.draw(ctx, fillStyle, strokeStyle) + }) + } exports.serialize = function(){ return this.shapes.map(function(shape){ return shape.serialize() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 4b80b2c..0f35ac5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -106,9 +106,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ } } - shapes.forEach(function(shape){ - shape.draw(map.draw.ctx) - }) + shapes.draw(map.draw.ctx, "rgba(255,255,0,0.1)", "#f80") map.draw.ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) -- cgit v1.2.3-70-g09d2 From f2b0b712d4a73bfaeb1ed21674b0843f0d6fa28a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 12:52:02 -0400 Subject: toggle map with esc --- public/assets/javascripts/mx/extensions/mx.movements.js | 5 ++++- public/assets/javascripts/rectangles/engine/rooms/_rooms.js | 4 +++- public/assets/javascripts/ui/blueprint/BlueprintToolbar.js | 13 +++++++++---- public/assets/javascripts/ui/blueprint/BlueprintView.js | 1 + 4 files changed, 17 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cecba7a..3e34c1b 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -155,7 +155,10 @@ MX.Movements = function (cam) { app.controller.presets.hide() $(".inuse").removeClass("inuse") } - else if (! Rooms.shapesMode) { + else if (Rooms.shapesMode) { + // don't show map in editor for now.. + } + else { app.controller.toolbar.toggleMap() } break diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 5c9945c..9aff33f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -134,10 +134,12 @@ window.wallHeight = data.wallHeight || app.defaults.wallHeight $(".units").val( data.units ) + Rooms.builder.clear() + shapes.deserialize( data.shapes ) // shapes.build() var regions = RegionList.build() - + regions.forEach(function(region){ var room = new Room({ rect: region, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 8b0a08f..458357d 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -24,6 +24,10 @@ var BlueprintToolbar = View.extend({ this.$eraserMode = this.$('[data-role=eraser-mode]') this.$startPositionMode = this.$('[data-role=start-position-mode]') + keys.on('escape', function(){ + app.controller.toolbar.toggleOrbitMode() + }) + this.arrowMode() }, @@ -44,11 +48,12 @@ var BlueprintToolbar = View.extend({ controls.toggle(false) movements.unlock() movements.gravity(true) - cam.rotationX = 0 - cam.rotationY = -cam.rotationY - cam.x = this.parent.startPosition.x + var pos = this.parent.quantizeStartPosition() + cam.rotationX = pos.rotationX + cam.rotationY = pos.rotationY + cam.x = pos.x cam.y = viewHeight - cam.z = this.parent.startPosition.z + cam.z = pos.z } }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 19b9e84..e249c91 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -18,6 +18,7 @@ var BlueprintView = View.extend({ this.info = new BlueprintInfo ({ parent: this }) this.settings = new BlueprintSettings ({ parent: this }) this.notice = new BlueprintNotice ({ parent: this }) + Rooms.shapesMode = true }, load: function(name){ -- cgit v1.2.3-70-g09d2 From cce1dea756717f1308c6b72f762b5ea5f5b43958 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Oct 2016 19:15:16 -0400 Subject: dpr --- public/assets/javascripts/mx/primitives/mx.text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 6b5681b..3095b67 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -47,7 +47,7 @@ MX.Text = MX.Object3D.extend({ if (! font.color || font.color[0] == "#") { font.color = [0,0,0] } this.inner.style.fontFamily = "'" + font.family + "',sans-serif" - this.el.style.fontSize = (2 * font.size / devicePixelRatio) + "pt" + this.el.style.fontSize = (font.size / devicePixelRatio) + "pt" this.el.style.textAlign = font.align this.el.style.color = rgb_string(font.color) }, -- cgit v1.2.3-70-g09d2