From a1d7b3fa6bbc1f27367d63ba31d247258a7e640e Mon Sep 17 00:00:00 2001
From: haeringer <christian@haeringer.net>
Date: Thu, 16 Jan 2014 23:01:03 +0100
Subject: [PATCH 1/9] first draft to brighten up the diff

---
 tasks/assets/scripts/worker.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tasks/assets/scripts/worker.js b/tasks/assets/scripts/worker.js
index 74dd88c..708ed8a 100644
--- a/tasks/assets/scripts/worker.js
+++ b/tasks/assets/scripts/worker.js
@@ -48,6 +48,7 @@ function diff( pixelsA, pixelsB, config ) {
       diffAmount = 0,
       threshold  = ~~config.threshold,
       color      = getHighlightColor ( config.higlightColor ),
+      adjustment = 150,
       i;
 
 
@@ -62,6 +63,10 @@ function diff( pixelsA, pixelsB, config ) {
       pixelsC.data[ i + 1 ] = color[ 1 ]; // g
       pixelsC.data[ i + 2 ] = color[ 2 ]; // b
       diffAmount++;
+    } else {
+      pixelsC.data[ i ]     += adjustment; // r
+      pixelsC.data[ i + 1 ] += adjustment; // g
+      pixelsC.data[ i + 2 ] += adjustment; // b
     }
   }
 

From d333673f9acf308c83f8d4fa2af9a6ed3b249e65 Mon Sep 17 00:00:00 2001
From: haeringer <christian@haeringer.net>
Date: Mon, 20 Jan 2014 20:56:32 +0100
Subject: [PATCH 2/9] Fixes #19

---
 tasks/tpl/canvas.tpl | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/tasks/tpl/canvas.tpl b/tasks/tpl/canvas.tpl
index 594fd14..93ff7fc 100644
--- a/tasks/tpl/canvas.tpl
+++ b/tasks/tpl/canvas.tpl
@@ -225,15 +225,16 @@
   <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;
 
     function placeKitten() {
       var size = this.dataset.size.replace( /x/, '/')
-      this.src = 'http://placekitten.com/' + size;
+      this.src = placeholderImage + size;
     }
 
     images.forEach( function( image ) {
@@ -296,7 +297,10 @@
       canvasList    = document.querySelectorAll( 'canvas' );
 
       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 ] );
+        }
+
       };
 
     }, false );

From 3b6d31a5a3d9f9b48cbc48a3548b281b8a47131c Mon Sep 17 00:00:00 2001
From: haeringer <christian@haeringer.net>
Date: Mon, 20 Jan 2014 21:47:09 +0100
Subject: [PATCH 3/9] added filter (brighter, darker and grayscale) to diff
 canvas

---
 tasks/assets/scripts/worker.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/tasks/assets/scripts/worker.js b/tasks/assets/scripts/worker.js
index 708ed8a..b0cd28a 100644
--- a/tasks/assets/scripts/worker.js
+++ b/tasks/assets/scripts/worker.js
@@ -49,6 +49,7 @@ function diff( pixelsA, pixelsB, config ) {
       threshold  = ~~config.threshold,
       color      = getHighlightColor ( config.higlightColor ),
       adjustment = 150,
+      filter     = 'brighter',
       i;
 
 
@@ -64,9 +65,23 @@ function diff( pixelsA, pixelsB, config ) {
       pixelsC.data[ i + 2 ] = color[ 2 ]; // b
       diffAmount++;
     } else {
-      pixelsC.data[ i ]     += adjustment; // r
-      pixelsC.data[ i + 1 ] += adjustment; // g
-      pixelsC.data[ i + 2 ] += adjustment; // b
+      // 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;
+      }
     }
   }
 

From 336587894d89cc4cc377d662e09bded97ed024a8 Mon Sep 17 00:00:00 2001
From: "christian.haeringer" <christian.haeringer@project-a.com>
Date: Tue, 21 Jan 2014 17:10:47 +0100
Subject: [PATCH 4/9] new photo box example options

---
 Gruntfile.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index e234d7e..c26e4d0 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -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' ]
         }
       }
     },

From 3bc638454e7c5bc92fe3a50323bf9fc814a1766f Mon Sep 17 00:00:00 2001
From: "christian.haeringer" <christian.haeringer@project-a.com>
Date: Tue, 21 Jan 2014 17:11:39 +0100
Subject: [PATCH 5/9] getting the filter from config option

---
 tasks/assets/scripts/worker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tasks/assets/scripts/worker.js b/tasks/assets/scripts/worker.js
index b0cd28a..0651fee 100644
--- a/tasks/assets/scripts/worker.js
+++ b/tasks/assets/scripts/worker.js
@@ -49,7 +49,7 @@ function diff( pixelsA, pixelsB, config ) {
       threshold  = ~~config.threshold,
       color      = getHighlightColor ( config.higlightColor ),
       adjustment = 150,
-      filter     = 'brighter',
+      filter     = config.diffFilter,
       i;
 
 

From dc669140b9b460bbe1448f3c790364f4223f5a62 Mon Sep 17 00:00:00 2001
From: "christian.haeringer" <christian.haeringer@project-a.com>
Date: Tue, 21 Jan 2014 17:12:37 +0100
Subject: [PATCH 6/9] added new config options and processing message

---
 tasks/tpl/canvas.tpl | 87 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 79 insertions(+), 8 deletions(-)

diff --git a/tasks/tpl/canvas.tpl b/tasks/tpl/canvas.tpl
index 93ff7fc..ee0b03b 100644
--- a/tasks/tpl/canvas.tpl
+++ b/tasks/tpl/canvas.tpl
@@ -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;
@@ -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;
     }
 
@@ -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>
@@ -230,7 +297,8 @@
         placeholderImage = 'http://placekitten.com/',
         lastImages,
         currentImages,
-        canvasList;
+        canvasList,
+        processing;
 
     function placeKitten() {
       var size = this.dataset.size.replace( /x/, '/')
@@ -251,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
@@ -276,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 %>',
         }
       };
 
@@ -286,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);
 
@@ -294,11 +364,12 @@
     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--) {
         if ( lastImages[ i ].src.indexOf( placeholderImage ) !== 0 ) {
-          prepareDiff( lastImages[ i ], currentImages[ i ], canvasList[ i ] );
+          prepareDiff( lastImages[ i ], currentImages[ i ], canvasList[ i ], processing[ i ] );
         }
 
       };

From 45dcf68d0a5d6038730d040ba226d768c9c851ff Mon Sep 17 00:00:00 2001
From: "christian.haeringer" <christian.haeringer@project-a.com>
Date: Tue, 21 Jan 2014 17:13:11 +0100
Subject: [PATCH 7/9] new photobox option structure

---
 tasks/lib/photobox.js | 13 +++++++++----
 tasks/photobox.js     |  8 +++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/tasks/lib/photobox.js b/tasks/lib/photobox.js
index 7c8e5c2..9ee8473 100644
--- a/tasks/lib/photobox.js
+++ b/tasks/lib/photobox.js
@@ -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();
@@ -42,7 +47,7 @@ var PhotoBox = function( grunt, options, callback ) {
  * @param  {String} err     error
  * @param  {Object} result  result
  * @param  {Number} code    exit code
- * @param  {String} picture name of current picture iteration
+ * @param  {String} picture name of currcopyent picture iteration
  */
 PhotoBox.prototype.compositeCallback = function( err, result, code, picture ) {
   if ( err ) {
@@ -548,14 +553,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(
diff --git a/tasks/photobox.js b/tasks/photobox.js
index 29b0055..54cf3a3 100644
--- a/tasks/photobox.js
+++ b/tasks/photobox.js
@@ -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' ]

From 59f449c9d4ffe0ba7874643674f8a77e5697e661 Mon Sep 17 00:00:00 2001
From: "christian.haeringer" <christian.haeringer@project-a.com>
Date: Wed, 22 Jan 2014 18:47:09 +0100
Subject: [PATCH 8/9] removed typo

---
 tasks/lib/photobox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tasks/lib/photobox.js b/tasks/lib/photobox.js
index 9ee8473..76cb07c 100644
--- a/tasks/lib/photobox.js
+++ b/tasks/lib/photobox.js
@@ -47,7 +47,7 @@ var PhotoBox = function( grunt, options, callback ) {
  * @param  {String} err     error
  * @param  {Object} result  result
  * @param  {Number} code    exit code
- * @param  {String} picture name of currcopyent picture iteration
+ * @param  {String} picture name of current picture iteration
  */
 PhotoBox.prototype.compositeCallback = function( err, result, code, picture ) {
   if ( err ) {

From cc9a814d5dde977dcafcfc2c6ff13783b9f6524e Mon Sep 17 00:00:00 2001
From: haeringer <christian@haeringer.net>
Date: Wed, 22 Jan 2014 22:45:22 +0100
Subject: [PATCH 9/9] fixed test

---
 test/lib/photoboxTest.js | 144 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 126 insertions(+), 18 deletions(-)

diff --git a/test/lib/photoboxTest.js b/test/lib/photoboxTest.js
index 1a92e39..d3a3ab9 100644
--- a/test/lib/photoboxTest.js
+++ b/test/lib/photoboxTest.js
@@ -14,7 +14,13 @@ exports.photoBox = {
     var cbFunction = function() {},
         options    = {
           indexPath   : 'tmp/',
-          template    : 'canvas',
+          template    : {
+                name    : 'canvas',
+                options : {
+                  highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                  diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                }
+              },
           screenSizes : [ '1000' ],
           urls        : [ 'http://google.com' ]
         },
@@ -33,7 +39,13 @@ exports.photoBox = {
     var cbFunction    = function() {},
         options       = {
           indexPath   : 'tmp/',
-          template    : 'canvas',
+          template    : {
+                name    : 'canvas',
+                options : {
+                  highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                  diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                }
+              },
           screenSizes : [ '1000' ],
           urls        : [ 'http://google.com' ]
         },
@@ -59,7 +71,13 @@ exports.photoBox = {
       var cbFunction = function() {},
           options    = {
             indexPath   : 'tmp/',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000' ],
             urls        : [ 'http://google.com' ]
           },
@@ -73,7 +91,13 @@ exports.photoBox = {
       var cbFunction = function() {},
           options    = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000' ],
             urls        : [ 'http://google.com' ]
           },
@@ -90,7 +114,13 @@ exports.photoBox = {
       var cbFunction = function() {},
           options    = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -122,7 +152,13 @@ exports.photoBox = {
       var timestampFilePath = './tmp/img/test/timestamp.json',
           options           = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -144,7 +180,13 @@ exports.photoBox = {
       var timestampFilePath = 'img/test/timestamp.json',
           options           = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -159,7 +201,13 @@ exports.photoBox = {
   getTimestamps : function( test ) {
     var options      = {
           indexPath   : 'tmp',
-          template    : 'canvas',
+          template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
           screenSizes : [ '1000', '1200' ],
           urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
         },
@@ -188,7 +236,13 @@ exports.photoBox = {
       var cbFunction = function() {},
           options    = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -206,7 +260,13 @@ exports.photoBox = {
       var cbFunction = function() {},
           options    = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -233,7 +293,13 @@ exports.photoBox = {
     errorAppeared : function( test ) {
       var options         = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -261,7 +327,13 @@ exports.photoBox = {
     noErrorAppeared : function( test ) {
       var options         = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -297,7 +369,13 @@ exports.photoBox = {
     errorAppeared : function( test ) {
       var options            = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -325,7 +403,13 @@ exports.photoBox = {
     noErrorAppeared : function( test ) {
       var options            = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -355,7 +439,13 @@ exports.photoBox = {
   startPhotoSession : function( test ) {
     var options = {
           indexPath   : 'tmp',
-          template    : 'canvas',
+          template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
           screenSizes : [ '1000', '1200' ],
           urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
         },
@@ -408,7 +498,13 @@ exports.photoBox = {
           },
           options    = {
             indexPath   : 'tmp',
-            template    : 'canvas',
+            template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
             screenSizes : [ '1000', '1200' ],
             urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
           },
@@ -460,7 +556,13 @@ exports.photoBox = {
   writeOptionsFile : function( test ) {
     var options            = {
           indexPath   : 'tmp',
-          template    : 'canvas',
+          template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
           screenSizes : [ '1000' ],
           urls        : [ 'http://google.com' ]
         },
@@ -486,7 +588,13 @@ exports.photoBox = {
   writeTimestampFile : function( test ) {
     var options            = {
           indexPath   : 'tmp',
-          template    : 'canvas',
+          template    : {
+                  name    : 'canvas',
+                  options : {
+                    highlightColor : '#ff0000', // template.options.hightlightColor || highlightcolor || default
+                    diffFilter     : 'default' //  default == no filter 'grayscale' | 'darker' | 'brighter'
+                  }
+                },
           screenSizes : [ '1000', '1200' ],
           urls        : [ 'http://google.com', 'http://4waisenkinder.de' ]
         },