Seriously.js: use color picker to define keyed color, use Seriously.js by default

Change-Id: Ia50fc5776ed8e833991b12e78f3db45e23a34bfa

Author: andi34

config/config.inc.php

@@ -164,11 +164,9 @@
 $config['keying']['size'] = '1500px';
 $config['live_keying']['enabled'] = false;
 // possible variant values: 'marvinj', 'seriouslyjs'
-$config['keying']['variant'] = 'marvinj';
+$config['keying']['variant'] = 'seriouslyjs';
 // Seriously.js RGB values
-$config['seriouslyjs']['r'] = '98';
-$config['seriouslyjs']['g'] = '175';
-$config['seriouslyjs']['b']  = '116';
+$config['keying']['seriouslyjs_color'] = '#62af74';
 $config['keying']['background_path'] = 'resources/img/background';
 $config['live_keying']['show_all'] = false;
 

lib/configsetup.inc.php

@@ -962,38 +962,12 @@
             ],
             'value' => $config['keying']['variant'],
         ],
-        'seriouslyjs_r' => [
-            'view' => 'expert',
-            'type' => 'range',
-            'placeholder' => $defaultConfig['seriouslyjs']['r'],
-            'name' => 'seriouslyjs[r]',
-            'value' => $config['seriouslyjs']['r'],
-            'range_min' => 0,
-            'range_max' => 255,
-            'range_step' => 1,
-            'unit' => 'empty',
-        ],
-        'seriouslyjs_g' => [
-            'view' => 'expert',
-            'type' => 'range',
-            'placeholder' => $defaultConfig['seriouslyjs']['g'],
-            'name' => 'seriouslyjs[g]',
-            'value' => $config['seriouslyjs']['g'],
-            'range_min' => 0,
-            'range_max' => 255,
-            'range_step' => 1,
-            'unit' => 'empty',
-        ],
-        'seriouslyjs_b' => [
-            'view' => 'expert',
-            'type' => 'range',
-            'placeholder' => $defaultConfig['seriouslyjs']['b'],
-            'name' => 'seriouslyjs[b]',
-            'value' => $config['seriouslyjs']['b'],
-            'range_min' => 0,
-            'range_max' => 255,
-            'range_step' => 1,
-            'unit' => 'empty',
+        'keying_seriouslyjs_color' => [
+            'view' => 'advanced',
+            'type' => 'color',
+            'name' => 'keying[seriouslyjs_color]',
+            'placeholder' => $defaultConfig['keying']['seriouslyjs_color'],
+            'value' => $config['keying']['seriouslyjs_color'],
         ],
         'keying_background_path' => [
             'view' => 'expert',

resources/lang/en.json

@@ -140,13 +140,11 @@
   "keying": "Chroma keying",
   "keying:keying_background_path": "Background images path",
   "keying:keying_enabled": "Allow chroma keying",
+  "keying:keying_seriouslyjs_color": "Seriously.js keying color",
   "keying:keying_size": "Chromakeying size",
   "keying:keying_variant": "Keying algorithm",
   "keying:live_keying_enabled": "Use live keying as start page",
   "keying:live_keying_show_all": "Show original and keyed image inside gallery while using live keying",
-  "keying:seriouslyjs_b": "Blue channel",
-  "keying:seriouslyjs_g": "Green channel",
-  "keying:seriouslyjs_r": "Red channel",
   "keyingerror": "Chroma keying not possible!",
   "login_invalid": "Username or password is invalid!",
   "login_password": "Password",
@@ -275,7 +273,6 @@
   "manual:keying:keying_variant": "Choose between different chromakeying algorithms. <b>Please note:</b> Seriously.js requires a browser that supports WebGL.",
   "manual:keying:live_keying_enabled": "Redirect from index to livechroma.php, default start page can't be accessed!",
   "manual:keying:live_keying_show_all": "If enabled, the original image and the keyed image get added to the gallery.",
-  "manual:keying:seriouslyjs_b": "Enter the RGB blue channel value used on chromakeying (Seriously.js).",
   "manual:keying:seriouslyjs_g": "Enter the RGB green channel value used on chromakeying (Seriously.js).",
   "manual:keying:seriouslyjs_r": "Enter the RGB red channel value used on chromakeying (Seriously.js).",
   "manual:mail:mail_enabled": "If enabled, a email button is visible on each picture inside the gallery. Depending on your setup you can send pictures via email directly or collect entered email address inside a database.",

src/js/chromakeying.js

@@ -119,9 +119,13 @@ function setMainImage(imgSrc) {
             chroma = seriously.effect('chroma');
             chroma.source = seriouslyimage;
             target.source = chroma;
-            const r = config.seriouslyjs.r / 255;
-            const g = config.seriouslyjs.g / 255;
-            const b = config.seriouslyjs.b / 255;
+            const color = config.keying.seriouslyjs_color;
+            const r = parseInt(color.substr(1, 2), 16) / 255;
+            const g = parseInt(color.substr(3, 2), 16) / 255;
+            const b = parseInt(color.substr(5, 2), 16) / 255;
+            if (config.dev.enabled) {
+                console.log('Chromakeying channels. Red:', r, 'Green:', g, 'Blue:', b);
+            }
             chroma.screen = [r, g, b, 1];
             seriously.go();
             mainImage = new Image();

src/js/livechroma.js

@@ -109,9 +109,13 @@ function setMainImage(imgSrc) {
             chroma = seriously.effect('chroma');
             chroma.source = seriouslyimage;
             target.source = chroma;
-            const r = config.seriouslyjs.r / 255;
-            const g = config.seriouslyjs.g / 255;
-            const b = config.seriouslyjs.b / 255;
+            const color = config.keying.seriouslyjs_color;
+            const r = parseInt(color.substr(1, 2), 16) / 255;
+            const g = parseInt(color.substr(3, 2), 16) / 255;
+            const b = parseInt(color.substr(5, 2), 16) / 255;
+            if (config.dev.enabled) {
+                console.log('Chromakeying channels. Red:', r, 'Green:', g, 'Blue:', b);
+            }
             chroma.screen = [r, g, b, 1];
             seriously.go();
             mainImage = new Image();