Merge pull request #199

Make Photobooth background image adjustable
andreknieriem · Dec 16, 2019 · dbd0f52 · dbd0f52
2 parents 0a2d88e + ad31995
commit dbd0f52
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 21 deletions.
diff --git a/admin/index.php b/admin/index.php
@@ -26,7 +26,7 @@
 	<link rel="stylesheet" type="text/css" href="../resources/css/admin.css" />
 </head>
 <body class="deselect">
-<div id="wrapper" style="overflow-y: auto;">
+<div id="wrapper" class="adminbg" style="overflow-y: auto;">
 	<div class="admin-panel">
 		<h2><a class="back-to-pb" href="../">Photobooth</a></h2>
 		<button class="reset-btn">

diff --git a/chromakeying.php b/chromakeying.php
@@ -53,7 +53,7 @@
 		</style>
 	</head>
 <body data-main-image="<?=$mainimage?>">
-	<div id="wrapper">
+	<div id="wrapper" class="chromabg">
 	<?php if ($keying_possible): ?>
 		<div class="canvasWrapper">
 			<canvas id="mainCanvas" width="1500" height="1000"></canvas>

diff --git a/config/config.inc.php b/config/config.inc.php
@@ -31,6 +31,9 @@
 $config['use_collage'] = false;
 $config['continuous_collage'] = false;
 $config['color_theme'] = 'default'; // possible values are default, blue-gray, or an array with the corresponding colors (e.g. ['primary' => '#fff', 'secondary'=>'#a1a1a1', 'font'=>'#000'])
+$config['background_image'] = null;
+$config['background_admin'] = null;
+$config['background_chroma'] = null;
 $config['force_buzzer'] = false;
 
 // specify key id to use that key to take a picture or collage (e.g. 13 is the enter key)

diff --git a/lib/config.php b/lib/config.php
@@ -92,6 +92,18 @@
     $config['colors'] = $colors['default'];
 }
 
+if (!isset($config['background_image'])) {
+    $config['background_image'] = 'url(../img/bg.jpg)';
+}
+
+if (!isset($config['background_admin'])) {
+    $config['background_admin'] = 'url(../img/bg.jpg)';
+}
+
+if (!isset($config['background_chroma'])) {
+    $config['background_chroma'] = 'url(../img/bg.jpg)';
+}
+
 if (file_exists($my_config_file) && !is_writable($my_config_file)) {
     die('Abort. Can not write config/my.config.inc.php.');
 } elseif (!file_exists($my_config_file) && !is_writable(__DIR__ . '/../config/')) {

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -176,6 +176,24 @@
 			],
 			'value' => $config['color_theme']
 		],
+		'background_image' => [
+			'type' => 'input',
+			'name' => 'background_image',
+			'placeholder' => 'url(../img/bg.jpg)',
+			'value' => $config['background_image']
+		],
+		'background_admin' => [
+			'type' => 'input',
+			'name' => 'background_admin',
+			'placeholder' => 'url(../img/bg.jpg)',
+			'value' => $config['background_admin']
+		],
+		'background_chroma' => [
+			'type' => 'input',
+			'name' => 'background_chroma',
+			'placeholder' => 'url(../img/bg.jpg)',
+			'value' => $config['background_chroma']
+		],
 		'show_fork' => [
 			'type' => 'checkbox',
 			'name' => 'show_fork',

diff --git a/resources/js/theme.js b/resources/js/theme.js
@@ -4,9 +4,9 @@ style.setProperty('--primary-color', config.colors.primary);
 style.setProperty('--secondary-color', config.colors.secondary);
 style.setProperty('--font-color', config.colors.font);
 
-if (config.color_theme === 'blue-gray') {
-    $('#wrapper').addClass('bluegray-bg');
-}
+style.setProperty('--background-default', config.background_image);
+style.setProperty('--background-admin', config.background_admin);
+style.setProperty('--background-chroma', config.background_chroma);
 
 $(function () {
     $('#wrapper').show();

diff --git a/resources/lang/de.js b/resources/lang/de.js
@@ -1,5 +1,8 @@
 /* exported L10N */
 const L10N = {
+    'user_interface_background_chroma': 'Pfad zum Hintergrundbild im Chroma-Keying Panel',
+    'user_interface_background_admin': 'Pfad zum Hintergrundbild im Admin Panel',
+    'user_interface_background_image': 'Pfad zum Hintergrundbild',
     'send': 'Senden',
     'show_error_messages': 'Fehlermeldungen anzeigen',
     'general_default_imagefilter': 'Standardbildfilter',

diff --git a/resources/lang/en.js b/resources/lang/en.js
@@ -1,5 +1,8 @@
 /* exported L10N */
 const L10N = {
+    'user_interface_background_chroma': 'Chroma keying panel background image path',
+    'user_interface_background_admin': 'Admin panel background image path',
+    'user_interface_background_image': 'Background image path',
     'send': 'Send',
     'show_error_messages': 'Show error messages',
     'general_default_imagefilter': 'Default image filter',

diff --git a/resources/lang/es.js b/resources/lang/es.js
@@ -1,5 +1,8 @@
 /* exported L10N */
 const L10N = {
+    'user_interface_background_chroma': 'Chroma keying panel background image path',
+    'user_interface_background_admin': 'Ruta de la imagen de fondo del panel de administración',
+    'user_interface_background_image': 'Ruta de la imagen de fondo',
     'send': 'Enviar',
     'show_error_messages': 'Mostrar mensajes de error',
     'general_default_imagefilter': 'Filtro de imagen predeterminado',

diff --git a/resources/lang/fr.js b/resources/lang/fr.js
@@ -1,5 +1,8 @@
 /* exported L10N */
 const L10N = {
+    'user_interface_background_chroma': 'Chroma keying panel background image path',
+    'user_interface_background_admin': 'Chemin de l\'image d\'arrière-plan du panneau d\'administration',
+    'user_interface_background_image': 'Chemin de l\'image de fond',
     'send': 'Envoyer',
     'show_error_messages': 'Afficher les messages d\'erreur',
     'general_default_imagefilter': 'Filtre d\'image par défaut',

diff --git a/resources/lang/gr.js b/resources/lang/gr.js
@@ -1,5 +1,8 @@
 /* exported L10N */
 const L10N = {
+    'user_interface_background_chroma': 'Chroma keying panel background image path',
+    'user_interface_background_admin': 'Διαδρομή εικόνας φόντου διαχειριστή',
+    'user_interface_background_image': 'διαδρομή εικόνας φόντου',
     'send': 'στείλετε',
     'show_error_messages': 'Εμφάνιση μηνυμάτων σφάλματος',
     'general_default_imagefilter': 'Προεπιλεγμένο φίλτρο εικόνας',

diff --git a/resources/sass/admin.scss b/resources/sass/admin.scss
@@ -1,4 +1,4 @@
-@import "modules/colors";
+@import "modules/theme";
 $error: #e74c3c;
 $success: #2ecc71;
 

diff --git a/resources/sass/modules/_colors.scss b/resources/sass/modules/_colors.scss
diff --git a/resources/sass/modules/_theme.scss b/resources/sass/modules/_theme.scss
@@ -0,0 +1,17 @@
+:root {
+    // default values are specified in lib/config.php
+    --primary-color: transparent;
+    --secondary-color: transparent;
+    --font-color: transparent;
+    --background-default: none;
+    --background-admin: none;
+    --background-chroma: none;
+}
+
+$mainColor: var(--primary-color);
+$hoverColor: var(--secondary-color);
+$fontColor: var(--font-color);
+
+$backgroundImage: var(--background-default);
+$adminBackground: var(--background-admin);
+$chromaBackground: var(--background-chroma);
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
@@ -1,4 +1,4 @@
-@import "modules/colors";
+@import "modules/theme";
 @import "partials/fonts";
 @import "partials/basic";
 @import "partials/button";
@@ -16,12 +16,15 @@
   width: 100%;
   height: 100%;
   background-color: $mainColor;
-  background-image: url(../img/bg.jpg);
+  background-image: $backgroundImage;
   background-position: center center;
   background-size: cover;
 
-  &.bluegray-bg {
-    background-image: url(../img/bg_bluegray.jpg);
+  &.adminbg {
+    background-image: $adminBackground;
+  }
+  &.chromabg {
+    background-image: $chromaBackground;
   }
 }
 
@@ -222,7 +225,7 @@ hr.small {
   color: #fff;
   width: 100%;
   height: 250px;
-  background: url(../img/bg.jpg) center center no-repeat;
+  background: $backgroundImage center center no-repeat;
   background-size: cover;
   -webkit-filter: blur(6px);
   -moz-filter: blur(6px);