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

admin/index.php

@@ -191,7 +191,7 @@ function isElementHidden($element_class, $setting)
                                                 echo '<div class="tooltip">';
                                                 echo '<label class="settinglabel" data-i18n="'.$i18ntag.'">'.$i18ntag.'</label>';
                                                 echo '<span class="tooltiptext" data-i18n="manual:'.$i18ntag.'">manual:'.$i18ntag.'</span></div>';
-                                                echo '<label class="floatright" id="'.$setting['name'].'-value"><span>'.$setting['value'].'</span> <span data-i18n="'.$setting['unit'].'">'.$setting['unit'].'</span></label>';
+                                                echo '<label class="floatright" id="'.$setting['name'].'-value"><span>'.$setting['value'].'</span>'.(($setting['unit'] == 'empty')?'': '<span data-i18n="'.$setting['unit'].'">'.$setting['unit'].'</span>').'</label>';
                                                 echo '<input type="range" name="'.$setting['name'].'" class="configslider settinginput" value="'.$setting['value'].'" min="'.$setting['range_min'].'" max="'.$setting['range_max'].'" step="'.$setting['range_step'].'" placeholder="'.$setting['placeholder'].'"/>';
                                                 echo '<label>'.$setting['range_min'].'</label><label class="floatright">'.$setting['range_max'].'</label>';
                                                 break;

config/config.inc.php

@@ -164,7 +164,8 @@
 $config['keying']['size'] = '1500px';
 $config['live_keying']['enabled'] = false;
 // possible variant values: 'marvinj', 'seriouslyjs'
-$config['keying']['variant'] = 'marvinj';
+$config['keying']['variant'] = 'seriouslyjs';
+$config['keying']['seriouslyjs_color'] = '#62af74';
 $config['keying']['background_path'] = 'resources/img/background';
 $config['live_keying']['show_all'] = false;
 

lib/configsetup.inc.php

@@ -962,6 +962,13 @@
             ],
             'value' => $config['keying']['variant'],
         ],
+        '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',
             'type' => 'input',

resources/lang/en.json

@@ -140,6 +140,7 @@
   "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",

src/js/chromakeying.js

@@ -119,9 +119,14 @@ function setMainImage(imgSrc) {
             chroma = seriously.effect('chroma');
             chroma.source = seriouslyimage;
             target.source = chroma;
-            const r = 98 / 255;
-            const g = 175 / 255;
-            const b = 116 / 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 color:', color);
+                console.log('Red:', r, 'Green:', g, 'Blue:', b);
+            }
             chroma.screen = [r, g, b, 1];
             seriously.go();
             mainImage = new Image();

src/js/livechroma.js

@@ -109,9 +109,14 @@ function setMainImage(imgSrc) {
             chroma = seriously.effect('chroma');
             chroma.source = seriouslyimage;
             target.source = chroma;
-            const r = 98 / 255;
-            const g = 175 / 255;
-            const b = 116 / 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 color:', color);
+                console.log('Red:', r, 'Green:', g, 'Blue:', b);
+            }
             chroma.screen = [r, g, b, 1];
             seriously.go();
             mainImage = new Image();