From 29e83ad8d76d4fa55ceda69be27137b3f00c4197 Mon Sep 17 00:00:00 2001 From: Uwe Pieper Date: Sun, 16 Jan 2022 12:57:21 +0100 Subject: [PATCH 1/5] ui: make taking pictures more beautiful Currently just two layers displayed over everything - not really optimal. Doesn't work on all pictures of a collage yet. Change-Id: I756a2d46cf779d0af78b19c7c90473ebc391070a --- index.php | 2 ++ src/js/core.js | 17 +++++++++++++++++ src/sass/classic_style.scss | 25 +++++++++++++++++++++++++ 3 files changed, 44 insertions(+) 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/src/js/core.js b/src/js/core.js index 2e0252c25..5c00a6e43 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'), @@ -425,6 +427,7 @@ const photoBooth = (function () { }; api.callTakePicApi = function (data, retry = 0) { + blocker.fadeTo(500, 1); startTime = new Date().getTime(); jQuery .post('api/takePic.php', data) @@ -433,6 +436,20 @@ const photoBooth = (function () { totalTime = endTime - startTime; photoboothTools.console.log('took ' + data.style, result); photoboothTools.console.logDev('Taking picture took ' + totalTime + 'ms'); + aperture.show(); + aperture.animate( + { + width: 0, + 'padding-bottom': 0 + }, + 500, + function () { + blocker.hide(); + } + ); + aperture.fadeTo(1000, 0, function () { + aperture.hide(); + }); cheese.empty(); if (config.preview.flipHorizontal) { idVideoView.removeClass('flip-horizontal'); 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; From de2ed424cb0eb9e6ddf80a2a4fd66f4ddfaa3ae1 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 16 Jan 2022 21:06:24 +0100 Subject: [PATCH 2/5] core: fix animation on next image (retry / next collage image) - reset aperture and blocker css values to default Change-Id: I32f065c7d03bb28c86478f1915c9d08859008010 --- src/js/core.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/core.js b/src/js/core.js index 5c00a6e43..31bb8256a 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -444,10 +444,14 @@ const photoBooth = (function () { }, 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(); }); cheese.empty(); From a4334078cae467811d17e73c19307fe17bb16028 Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 16 Jan 2022 21:25:20 +0100 Subject: [PATCH 3/5] core: allow to disable the shutter animation Change-Id: I77c3cd93ed1136ba6dc004083889b64d6bd301f0 --- config/config.inc.php | 1 + lib/configsetup.inc.php | 6 ++++++ resources/lang/en.json | 2 ++ src/js/core.js | 42 ++++++++++++++++++++++------------------- 4 files changed, 32 insertions(+), 19 deletions(-) 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/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/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 31bb8256a..28a3a4d25 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -427,7 +427,9 @@ const photoBooth = (function () { }; api.callTakePicApi = function (data, retry = 0) { - blocker.fadeTo(500, 1); + if (config.ui.shutter_animation) { + blocker.fadeTo(500, 1); + } startTime = new Date().getTime(); jQuery .post('api/takePic.php', data) @@ -436,24 +438,26 @@ const photoBooth = (function () { totalTime = endTime - startTime; photoboothTools.console.log('took ' + data.style, result); photoboothTools.console.logDev('Taking picture took ' + totalTime + 'ms'); - 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(); - }); + if (config.ui.shutter_animation) { + 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(); + }); + } cheese.empty(); if (config.preview.flipHorizontal) { idVideoView.removeClass('flip-horizontal'); From 5b3c5e8c4394f82da65130cf34a42a4a249a3fff Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Mon, 17 Jan 2022 07:47:58 +0100 Subject: [PATCH 4/5] core: add own animation functions Move the shutter start and stop animation to it's own function, this way we are more flexible while adjusting things if needed. Change-Id: If4b9c8c4d3f664bb44c40b5a19124b86bac52305 --- src/js/core.js | 47 ++++++++++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/src/js/core.js b/src/js/core.js index 28a3a4d25..f424de617 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -264,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'); @@ -428,7 +454,7 @@ const photoBooth = (function () { api.callTakePicApi = function (data, retry = 0) { if (config.ui.shutter_animation) { - blocker.fadeTo(500, 1); + api.shutter.start(); } startTime = new Date().getTime(); jQuery @@ -439,24 +465,7 @@ const photoBooth = (function () { photoboothTools.console.log('took ' + data.style, result); photoboothTools.console.logDev('Taking picture took ' + totalTime + 'ms'); if (config.ui.shutter_animation) { - 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.shutter.stop(); } cheese.empty(); if (config.preview.flipHorizontal) { From 968b2e8cb5fcf82bdc7b7da63b5ec7ea05cc0cfd Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Mon, 17 Jan 2022 07:49:31 +0100 Subject: [PATCH 5/5] livechroma: use shutter animation Change-Id: I5750bfd63f533f24a755cef2788e2ac926534595 --- livechroma.php | 2 ++ src/sass/classic_live_chromakeying.scss | 25 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+) 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/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;