From 1f66850f5ec5a2e664ee8eaafbe25c46dad34102 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 12:11:18 -0400 Subject: generate masks for thumbnails --- .../javascripts/rectangles/engine/map/draw.js | 64 ++++++++++++++-------- 1 file changed, 42 insertions(+), 22 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map/draw.js') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 3e185d2..07e2d9f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -10,7 +10,7 @@ Map.Draw = function(map, opt){ draw.animate = function(){ ctx.save() draw.clear() - // draw.ruler() + draw.fill("rgba(255,255,255,0.98)") if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -19,7 +19,7 @@ Map.Draw = function(map, opt){ ctx.scale( -1, 1 ) draw.coords() - draw.regions(Rooms.regions, [ "#fff" ]) + draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } @@ -29,7 +29,7 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, [ "#f8f8f8" ]) + draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) @@ -39,7 +39,12 @@ Map.Draw = function(map, opt){ } draw.render = function(){ - ctx.save() + // change the ctx temporarily + var canvas = document.createElement("canvas") + ctx = canvas.getContext('2d') + canvas.width = map.canvas.width + canvas.height = map.canvas.height + draw.clear() ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -47,37 +52,52 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, ["#fff"]) - draw.mouse(map.ui.mouse.cursor) - scene && draw.camera(scene.camera) - + draw.regions(Rooms.regions, ["#fff"], null) + ctx.restore() + + // invert opacity + var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height) + var pixels = pixelData.data + for (var i = 0, k, _len = pixels.length; i < _len; i++) { + k = i*4 + if (pixels[k+3] == 0) { + pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255 + } + else { + pixels[k] = pixels[k+1] = pixels[k+2] = 255 + pixels[k+3] = 0 + } + } + ctx.putImageData(pixelData, 0, 0) + + // reset the ctx + ctx = map.canvas.getContext("2d") + + return canvas } draw.clear = function(){ - ctx.fillStyle = "rgba(255,255,255,0.98)" ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b) - ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.ruler = function (){ - ctx.strokeStyle = "rgba(80,80,80,0.5)" - ctx.lineWidth = 1 - var len = 5 - for (var i = 0.5; i < map.dimensions.a; i += 10) { - line(i, 0, i, len) - line(0, i, len, i) - } + draw.fill = function(fillStyle){ + ctx.fillStyle = fillStyle + ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.regions = function(regions, colors){ + draw.regions = function(regions, colors, stroke){ + if (stroke) { + ctx.strokeStyle = "#000" + ctx.lineWidth = (1 / map.zoom) + } for (var i = 0; i < regions.length; i++) { if (regions[i].dupe) continue ctx.fillStyle = colors[i % colors.length] - ctx.strokeStyle = "#000" - ctx.lineWidth = (1 / map.zoom) fill_region(regions[i]) - stroke_sides(regions[i]) + if (stroke) { + stroke_sides(regions[i]) + } } } -- cgit v1.2.3-70-g09d2 From 6f4cd32fa13efe3b0e8b26183589f66889dd3738 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 13:26:08 -0400 Subject: render thumbnails as masks --- .../javascripts/rectangles/engine/map/draw.js | 20 ++++++++++++------- .../javascripts/rectangles/engine/rooms/_rooms.js | 10 ++++++++++ .../assets/javascripts/rectangles/models/rect.js | 23 ++++++++++++++++++++++ .../javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/stylesheets/app.css | 11 +++++------ 5 files changed, 52 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map/draw.js') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 07e2d9f..6c27ff1 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -38,18 +38,24 @@ Map.Draw = function(map, opt){ ctx.restore() } + // changes the ctx temporarily draw.render = function(){ - // change the ctx temporarily + var thumbnail_side = 1000 + + var extent = Rooms.extent() + var center = extent.center() + var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99 + var canvas = document.createElement("canvas") ctx = canvas.getContext('2d') - canvas.width = map.canvas.width - canvas.height = map.canvas.height + canvas.width = thumbnail_side + canvas.height = thumbnail_side draw.clear() - ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) - ctx.scale( map.zoom, map.zoom ) - ctx.translate( map.center.a, map.center.b ) + ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2) + ctx.scale( zoom, zoom ) + ctx.translate( center.a, -center.b ) ctx.scale( -1, 1 ) draw.regions(Rooms.regions, ["#fff"], null) @@ -73,7 +79,7 @@ Map.Draw = function(map, opt){ // reset the ctx ctx = map.canvas.getContext("2d") - + return canvas } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 6f96275..0c3cfd4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -118,6 +118,16 @@ return data } + base.extent = function(){ + var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) ) + + base.forEach(function(room){ + extent.expand(room.rect) + }) + + return extent + } + base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) } diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index a08176a..00f2c55 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -141,6 +141,29 @@ Rect.prototype.width = function(){ return this.x.length() } Rect.prototype.height = function(){ return this.y.length() } Rect.prototype.delta = function(){ return new vec2( this.x.magnitude(), this.y.magnitude() ) } + Rect.prototype.expand = function(rect){ + this.x.a = Math.min( this.x.a, rect.x.a ) + this.x.b = Math.max( this.x.b, rect.x.b ) + this.y.a = Math.min( this.y.a, rect.y.a ) + this.y.b = Math.max( this.y.b, rect.y.b ) + return this + } + Rect.prototype.square = function(){ + var width = this.x.length() + var height = this.y.length() + var diff + if (width < height) { + diff = (height - width) / 2 + this.x.a -= diff + this.x.b += diff + } + else { + diff = (width - height) / 2 + this.y.a -= diff + this.y.b += diff + } + return this + } Rect.prototype.toString = function(){ var sides = sidesToString(this.sides) var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 99bceed..7ae6294 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - var thumbnail = map.canvas.render() + var thumbnail = map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e23962..d47b5a7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -619,16 +619,16 @@ iframe.embed { display: none; } -.templates span{ +.templates span { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #fff; width: 20vw; - height: 20vh; + height: 20vw; display: inline-block; margin: 4vw; - border:1px solid black; + background-color: #ddd; position: relative; } @@ -640,17 +640,16 @@ iframe.embed { left: 0; background: #fff; padding: 5px; - border-top: 1px solid black; font-weight: 300; } .templates span:hover { - border:1px solid blue; + background-color: #f00; cursor:pointer; } .templates span:hover:after { - border-top: 1px solid blue; + color: #f00; } .templates h1 { -- cgit v1.2.3-70-g09d2 From 583d213f22be93a1363c24ac2cdf9f083833703f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 14:47:47 -0400 Subject: projectList item formatting --- .../javascripts/rectangles/engine/map/draw.js | 19 ++++-- .../javascripts/rectangles/engine/rooms/_rooms.js | 2 - public/assets/stylesheets/app.css | 77 +++++++++++++++------- server/lib/views/index.js | 5 ++ views/projects/list-projects.ejs | 34 +++++----- 5 files changed, 88 insertions(+), 49 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map/draw.js') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 6c27ff1..7eb6e7c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -40,20 +40,29 @@ Map.Draw = function(map, opt){ // changes the ctx temporarily draw.render = function(){ - var thumbnail_side = 1000 + var thumbnail_width = 1000 + var thumbnail_height = 750 var extent = Rooms.extent() var center = extent.center() - var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99 + var extent_width = extent.width() + var extent_height = extent.height() + var zoom + if (extent_width > extent_height) { + zoom = thumbnail_width / extent.width() * 0.9 + } + else { + zoom = thumbnail_height / extent.height() * 0.9 + } var canvas = document.createElement("canvas") ctx = canvas.getContext('2d') - canvas.width = thumbnail_side - canvas.height = thumbnail_side + canvas.width = thumbnail_width + canvas.height = thumbnail_height draw.clear() - ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2) + ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2) ctx.scale( zoom, zoom ) ctx.translate( center.a, -center.b ) ctx.scale( -1, 1 ) diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 0c3cfd4..3603f0c 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -120,11 +120,9 @@ base.extent = function(){ var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) ) - base.forEach(function(room){ extent.expand(room.rect) }) - return extent } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d47b5a7..24ca772 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -327,27 +327,42 @@ iframe.embed { .projectList { display: inline-block; float: left; - width: 100%; + width: 98vw; + margin: 2vw; } +.projectList a { + width: 32vw; + float:left; + clear: right; + padding-bottom: 2vw; +} .projectList .room { - width: 50%; - height:40vh; + width: 30vw; + height: 23vw; + margin: 1vw; + border: 1vw solid white; display:table; position: relative; - float:left; - border-top:1px solid; + z-index: 1; } - -.projectList .room:nth-child(3n+2) { - border-right:1px solid black; +.projectList .holder { + position: absolute; + top: 50%; + z-index: 2; } -.projectList .room:nth-child(3n+1) { - width: 100%; - height: 50vh; +.room .mask { + position: absolute; + top: 0; left: 0; + z-index: 1; + width: 100%; + height: 100%; + text-align: center; + overflow: hidden; + background-size: cover; + background-repeat: no-repeat; } - .room .images { position: absolute; top: 0; left: 0; @@ -358,15 +373,28 @@ iframe.embed { overflow: hidden; } .room .images img { - max-height: 100%; - max-width: 100%; + width: 50%; + position: absolute; } +.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; } + +.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 100%; } +.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 0%; width: auto; height: 100%; } + +.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; } +.room .images[data-mediacount='3'] img:nth-child(2) { left: 51%; bottom: 0%; width:auto; height:100%;} +.room .images[data-mediacount='3'] img:nth-child(3) { right: 51%; top: 61%; } + +.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; } +.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; } +.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; } +.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; } + .page .btn { clear: both; padding: 30px 0; border: 0; - } .page .viewMore { @@ -385,22 +413,21 @@ iframe.embed { vertical-align: middle; } -.page .room .holder a { - font-weight: 300; - font-size: 20px; - letter-spacing: 1px; +.page label { + font-weight: 500; + font-size: 15px; color: black; - background: white; - border: 1px solid; padding: 5px; - box-shadow: -3px 3px black; text-decoration:none; - max-width: 180px; display: inline-block; + cursor: pointer; } -.page .room .holder a:hover { - background:black; +.projectList a:hover { + background: linear-gradient( 0deg, blue, red ); +} + +.projectList a:hover label { color:white; } diff --git a/server/lib/views/index.js b/server/lib/views/index.js index ca48159..3f3880f 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -139,6 +139,11 @@ views.profile = function (req, res) { projects = projects.map(function(project){ project = project.toObject() project.date = moment(project.updated_at).format("M/DD/YYYY") + if (project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) { + project.color = [238,238,238] + } else { + project.color = project.colors.wall + } return project }) done(err, user, projects) diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index a12f237..f469f5c 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -4,31 +4,31 @@ [[ projects.forEach(function(project, i) { ]] - - - + [[ if (String(user._id) == String(project.user_id)) { ]] + + [[ } else { ]] + + [[ } ]] + + + [[ mediaCount = 0 ]] [[ project.media.some(function(media){ ]] [[ if (media.media.type != "image") { return false } ]] - [[ if (++mediaCount > 3) { return true } ]] + [[ if (++mediaCount > 1) { return true } ]] [[ }) ]] - -
- [[ if (String(user._id) == String(project.user_id)) { ]] - - [[- project.name ]]
- [[- project.date ]] - - [[ } else { ]] - - [[- project.name ]]
- [[- project.date ]] - [[ } ]] -
+ + + + + [[ }) ]] -- cgit v1.2.3-70-g09d2