diff --git a/config/config.inc.php b/config/config.inc.php index b40af776d..fda5b9fad 100644 --- a/config/config.inc.php +++ b/config/config.inc.php @@ -298,6 +298,7 @@ // U S E R I N T E R F A C E // possible style values: "classic", "modern", "custom" $config['ui']['style'] = 'modern'; +$config['ui']['shutter_animation'] = true; $config['button']['show_fs'] = false; $config['button']['homescreen'] = true; $config['ui']['result_buttons'] = true; diff --git a/index.php b/index.php index 6e5aa0287..41e78e74c 100644 --- a/index.php +++ b/index.php @@ -85,6 +85,8 @@ +
+
diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php index f80a9caa7..428e6b433 100644 --- a/lib/configsetup.inc.php +++ b/lib/configsetup.inc.php @@ -1752,6 +1752,12 @@ ], 'value' => $config['ui']['style'], ], + 'ui_shutter_animation' => [ + 'view' => 'basic', + 'type' => 'checkbox', + 'name' => 'ui[shutter_animation]', + 'value' => $config['ui']['shutter_animation'], + ], 'button_show_fs' => [ 'view' => 'basic', 'type' => 'checkbox', diff --git a/livechroma.php b/livechroma.php index ccf7035b2..165ee2451 100644 --- a/livechroma.php +++ b/livechroma.php @@ -65,6 +65,8 @@ +
+
diff --git a/resources/lang/en.json b/resources/lang/en.json index 8176d4324..826277413 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -449,6 +449,7 @@ "manual:userinterface:ui_font_size": "Enter the default font size used for the Photobooth interface.", "manual:userinterface:ui_result_buttons": "If enabled, post-processing buttons will be visible on the on result screen. If disabled the whole button bar will be hidden.", "manual:userinterface:ui_rounded_corners": "If enabled, the Photobooth UI uses smooth rounded edges.", + "manual:userinterface:ui_shutter_animation": "If enabled, a shutter animation will be visible while taking a picture.", "manual:userinterface:ui_style": "Choose a start page styling. To use custom styling please create and use \"/template/custom.template.php\" and \"/resources/css/custom_style.css\", if one of these files is not readable we will fallback to default theme.", "manual:version:check_version": "This will check online against the Github repository for the latest Photobooth version.", "manual:version:updater_button": "This will check if Photobooth can be updated and perform the update. Only works on Linux if Photobooth was installed via git.", @@ -638,6 +639,7 @@ "userinterface:ui_font_size": "Default font size", "userinterface:ui_result_buttons": "Show button bar on result screen", "userinterface:ui_rounded_corners": "Rounded corners", + "userinterface:ui_shutter_animation": "Shutter animation", "userinterface:ui_style": "Styling", "using_latest_version": "You are using the latest version of photobooth.", "version": "Version", diff --git a/src/js/core.js b/src/js/core.js index 2e0252c25..f424de617 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -23,6 +23,8 @@ const photoBooth = (function () { resultInner = $('.resultInner'), spinner = $('.spinner'), sendMail = $('.send-mail'), + blocker = $('#blocker'), + aperture = $('#aperture'), idVideoView = $('#video--view'), idVideoPreview = $('#video--preview'), idVideoSensor = $('#video--sensor'), @@ -262,6 +264,32 @@ const photoBooth = (function () { } }; + api.shutter = { + start: function () { + blocker.fadeTo(500, 1); + }, + stop: function () { + aperture.show(); + aperture.animate( + { + width: 0, + 'padding-bottom': 0 + }, + 500, + function () { + blocker.css('opacity', '0'); + blocker.hide(); + } + ); + aperture.fadeTo(1000, 0, function () { + aperture.css('opacity', '1'); + aperture.css('width', '150%'); + aperture.css('padding-bottom', '150%'); + aperture.hide(); + }); + } + }; + api.showResultInner = function (flag) { if (flag) { resultInner.addClass('show'); @@ -425,6 +453,9 @@ const photoBooth = (function () { }; api.callTakePicApi = function (data, retry = 0) { + if (config.ui.shutter_animation) { + api.shutter.start(); + } startTime = new Date().getTime(); jQuery .post('api/takePic.php', data) @@ -433,6 +464,9 @@ const photoBooth = (function () { totalTime = endTime - startTime; photoboothTools.console.log('took ' + data.style, result); photoboothTools.console.logDev('Taking picture took ' + totalTime + 'ms'); + if (config.ui.shutter_animation) { + api.shutter.stop(); + } cheese.empty(); if (config.preview.flipHorizontal) { idVideoView.removeClass('flip-horizontal'); diff --git a/src/sass/classic_live_chromakeying.scss b/src/sass/classic_live_chromakeying.scss index bfea2ac3a..bf45bbc31 100644 --- a/src/sass/classic_live_chromakeying.scss +++ b/src/sass/classic_live_chromakeying.scss @@ -125,6 +125,31 @@ } } +#blocker { + position: absolute; + display: none; + width: 100%; + height: 100%; + z-index: 1499; + background-color: #ffffff; + opacity: 0; +} + +#aperture { + box-sizing: content-box; + display: none; + width: 150%; + padding-bottom: 150%; + height: 0; + position: absolute; + top: 50%; + left: 50%; + z-index: 1500; + transform: translate(-50%, -50%); + border: solid 2000px #000000; + border-radius: 50%; +} + #video--view { top: 0; left: 0; diff --git a/src/sass/classic_style.scss b/src/sass/classic_style.scss index 91f6378bd..36719d411 100644 --- a/src/sass/classic_style.scss +++ b/src/sass/classic_style.scss @@ -10,6 +10,31 @@ @import 'partials/ribbon'; @import 'vendor/photoswipe'; +#blocker { + position: absolute; + display: none; + width: 100%; + height: 100%; + z-index: 1499; + background-color: #ffffff; + opacity: 0; +} + +#aperture { + box-sizing: content-box; + display: none; + width: 150%; + padding-bottom: 150%; + height: 0; + position: absolute; + top: 50%; + left: 50%; + z-index: 1500; + transform: translate(-50%, -50%); + border: solid 2000px #000000; + border-radius: 50%; +} + #wrapper { display: none; position: relative;