Skip to content

Commit

Permalink
Merge pull request #21 from stefanjudis/feature/18-make-the-differenc…
Browse files Browse the repository at this point in the history 
…es-a-bit-clear

Feature/18 make the differences a bit clear
  • Loading branch information
@stefanjudis
stefanjudis committed Feb 19, 2014
2 parents 8f45163 + cc9a814 commit d8678bb
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 35 deletions.
10 changes: 8 additions & 2 deletions Gruntfile.js
View file
Expand Up @@ -37,8 +37,14 @@ module.exports = function(grunt) {
indexPath : 'photobox/',
highlightColor : '#0000ff',
screenSizes : [ '960', '350', '1200' ],
template : 'canvas',
urls : [ 'http://4waisenkinder.de' ]
template : {
name : 'canvas',
options : {
highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
diffFilter : 'grayscale' // default == no filter 'grayscale' | 'darker' | 'brighter'
}
},
urls : [ 'http://www.faz.net' ]
}
}
},
Expand Down
20 changes: 20 additions & 0 deletions tasks/assets/scripts/worker.js
View file
Expand Up @@ -48,6 +48,8 @@ function diff( pixelsA, pixelsB, config ) {
diffAmount = 0,
threshold = ~~config.threshold,
color = getHighlightColor ( config.higlightColor ),
adjustment = 150,
filter = config.diffFilter,
i;


Expand All @@ -62,6 +64,24 @@ function diff( pixelsA, pixelsB, config ) {
pixelsC.data[ i + 1 ] = color[ 1 ]; // g
pixelsC.data[ i + 2 ] = color[ 2 ]; // b
diffAmount++;
} else {
// no difference found
if ( filter === 'brighter' ) {
pixelsC.data[ i ] += adjustment; // r
pixelsC.data[ i + 1 ] += adjustment; // g
pixelsC.data[ i + 2 ] += adjustment; // b
} else if ( filter === 'darker' ) {
pixelsC.data[ i ] -= adjustment; // r
pixelsC.data[ i + 1 ] -= adjustment; // g
pixelsC.data[ i + 2 ] -= adjustment; // b
} else if ( filter === 'grayscale' ) {

var y = 0.2126 * pixelsC.data[ i ] +
0.7152 * pixelsC.data[ i + 1 ] +
0.0722 * pixelsC.data[ i + 2 ];

pixelsC.data[ i ] = pixelsC.data[ i + 1 ] = pixelsC.data[ i + 2 ] = y;
}
}
}

Expand Down
11 changes: 8 additions & 3 deletions tasks/lib/photobox.js
View file
Expand Up @@ -29,7 +29,12 @@ var PhotoBox = function( grunt, options, callback ) {
this.options = options;
this.options.indexPath = this.getIndexPath();
this.pictureCount = 0;
this.template = options.template;

if ( typeof options.template === 'string' ) {
this.template = options.template;
} else if ( typeof options.template === 'object' ) {
this.template = options.template.name;
}

this.movePictures();
this.pictures = this.getPreparedPictures();
Expand Down Expand Up @@ -551,14 +556,14 @@ PhotoBox.prototype.tookPictureHandler = function() {
if ( this.pictureCount === this.pictures.length ) {
this.grunt.log.ok( 'PHOTOBOX FINISHED PHOTO SESSION SUCCESSFULLY.' );

if ( this.options.template === 'magic' ) {
if ( this.template === 'magic' ) {
this.grunt.log.writeln(
'\nNOTE: You defined to use ImageMagick, make sure it is installed.'
);

this.createDiffImages();
} else {
if ( this.options.template === 'canvas' ) {
if ( this.template === 'canvas' ) {
// copy worker to photobox folder
// grunt.file.copy( srcpath, destpath );
this.grunt.file.copy(
Expand Down
8 changes: 7 additions & 1 deletion tasks/photobox.js
View file
Expand Up @@ -23,7 +23,13 @@ module.exports = function( grunt ) {
loadImages : true,
password : '',
screenSizes : [ '800' ],
template : 'cssOverlay',
template : {
name : 'canvas',
options : {
highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
diffFilter : 'default' // default == no filter 'grayscale' | 'darker' | 'brighter'
}
},
userAgent : 'Photobox',
userName : '',
urls : [ 'http://google.com' ]
Expand Down
97 changes: 86 additions & 11 deletions tasks/tpl/canvas.tpl
View file
Expand Up @@ -94,6 +94,68 @@
box-shadow: inset 0 1px 2px #000;
}
h3 {
font-weight: normal;
font-size: 12px;
text-align: center;
color: #fff;
}
#semi_border {
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
-webkit-animation-duration: 1.25s;
-moz-animation-duration: 1.25s;
-o-animation-duration: 1.25s;
animation-duration: 1.25s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: semi_border;
-moz-animation-name: semi_border;
-o-animation-name: semi_border;
animation-name: semi_border;
-webkit-animation-play-state: inherit;
-moz-animation-play-state: inherit;
-o-animation-play-state: inherit;
animation-play-state: inherit;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
border: 7px solid transparent;
border-left-color: #ffffff;
border-radius: 50%;
height: 16px;
margin: auto;
width: 16px;
}
@-webkit-keyframes semi_border {
from { -webkit-transform: rotate(0); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes semi_border {
from { -moz-transform: rotate(0); }
to { -moz-transform: rotate(360deg); }
}
@-o-keyframes semi_border {
from { -o-transform: rotate(0); }
to { -o-transform: rotate(360deg); }
}
@keyframes semi_border {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
button {
margin: 0 auto;
width: 240px;
Expand Down Expand Up @@ -137,10 +199,12 @@
vertical-align: top;
}
.col canvas,
.col img {
.col canvas {
width: 100%;
}
.col img {
width: 100%;
box-shadow: 0 1px 1px #333;
}
Expand Down Expand Up @@ -210,6 +274,9 @@
<p><%= timestamps.last %></p>
</div><div class="col">
<h2>Difference</h2>
<h3 class="processing">
<div id="semi_border"></div>
we are checking for different pixels..</h3>
<canvas>canvas is not supported</canvas>
</div><div class="col">
<h2>New Screens</h2>
Expand All @@ -225,15 +292,17 @@
<script type="text/javascript">
( function() {
'use strict';
var imagesList = document.querySelectorAll( 'img' ),
images = Array.prototype.slice.call( imagesList, 0 ),
var imagesList = document.querySelectorAll( 'img' ),
images = Array.prototype.slice.call( imagesList, 0 ),
placeholderImage = 'http://placekitten.com/',
lastImages,
currentImages,
canvasList;
canvasList,
processing;
function placeKitten() {
var size = this.dataset.size.replace( /x/, '/')
this.src = 'http://placekitten.com/' + size;
this.src = placeholderImage + size;
}
images.forEach( function( image ) {
Expand All @@ -250,7 +319,7 @@
* @param {Object} imgB a img DOM element
* @param {Object} cnvs a canvas DOM element
*/
function prepareDiff( imgA, imgB, cnvs ) {
function prepareDiff( imgA, imgB, cnvs, processing ) {
'use strict';
// get the real image dimensions
Expand All @@ -275,8 +344,9 @@
a : pixelsA,
b : pixelsB,
config: {
higlightColor : '<%= options.highlightColor %>',
threshold : 10
higlightColor : '<%= options.template.options.highlightColor %>',
threshold : 10,
diffFilter : '<%= options.template.options.diffFilter %>',
}
};
Expand All @@ -285,6 +355,7 @@
worker.postMessage( data );
worker.addEventListener( 'message', function( e ) {
ctx.putImageData( e.data.imageData, 0, 0 );
processing.style.display = 'none'
console.warn( 'Found ', e.data.amount, 'different pixels' );
}, false);
Expand All @@ -293,10 +364,14 @@
window.addEventListener( 'load' , function() {
lastImages = document.querySelectorAll( '.last' );
currentImages = document.querySelectorAll( '.current' );
canvasList = document.querySelectorAll( 'canvas' );
canvasList = document.querySelectorAll( 'canvas' ),
processing = document.querySelectorAll( '.processing' );
for (var i = lastImages.length - 1; i >= 0; i--) {
prepareDiff( lastImages[ i ], currentImages[ i ], canvasList[ i ] );
if ( lastImages[ i ].src.indexOf( placeholderImage ) !== 0 ) {
prepareDiff( lastImages[ i ], currentImages[ i ], canvasList[ i ], processing[ i ] );
}
};
}, false );
Expand Down

0 comments on commit d8678bb

Please sign in to comment.