remotebuzzer: enable rotary for live-chromakeying

jacques42 · andi34 · commit 76789130f0b6 · 2021-03-14T09:48:34.000+01:00
Change-Id: I6980af1293fbdd9e0d076eeb00ac6085a97c3999
diff --git a/livechroma.php b/livechroma.php
@@ -63,13 +63,14 @@
 	</head>
 <body>
 	<div class="chromawrapper">
+	<div class="rotarygroup" id="start">
 		<div class="top-bar">
 			<?php if (!$config['live_keying']['enabled']): ?>
-			<a href="index.php" class="<?php echo $btnClass1; ?> closebtn"><i class="fa fa-times"></i></a>
+			<a href="index.php" class="<?php echo $btnClass1; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>
 			<?php endif; ?>
 
 			<?php if ($config['gallery']['enabled']): ?>
-			<a href="#" class="<?php echo $btnClass1 ?> gallerybtn"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
+			<a href="#" class="<?php echo $btnClass1 ?> gallerybtn rotaryfocus"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
 			<?php endif; ?>
 
 		</div>
@@ -109,20 +110,21 @@
 				$cdir = scandir($dir);
 				foreach ($cdir as $key => $value) {
 					if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {
-						echo '<img src="'.$dir.$value.'" class="backgroundPreview" onclick="setBackgroundImage(this.src)">';
+						echo '<img src="'.$dir.$value.'" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
 					}
 				}
 			?>
 		</div>
 
 		<div class="chroma-control-bar">
-			<a href="#" class="<?php echo $btnClass2; ?> takeChroma"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
+			<a href="#" class="<?php echo $btnClass2; ?> takeChroma rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
 			<?php if ($config['picture']['allow_delete']): ?>
-			<a href="#" class="deletebtn <?php echo $btnClass2; ?> "><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
+			<a href="#" class="<?php echo $btnClass2; ?> deletebtn"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
 			<?php endif; ?>
-			<a href="#" class="reloadPage <?php echo $btnClass2; ?> "><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
+			<a href="#" class="reloadPage <?php echo $btnClass2; ?> rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
 		</div>
-	<div>
+	</div>
+	<div class="rotarygroup">
 
 	<div id="wrapper">
 		<?php include('template/gallery.template.php'); ?>
@@ -165,8 +167,11 @@
 	<script type="text/javascript" src="vendor/Seriously/effects/seriously.chroma.js"></script>
 	<?php endif; ?>
 	<script type="text/javascript" src="resources/js/livechroma.js"></script>
+	<script type="text/javascript" src="resources/js/remotebuzzer_client.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
 	<script type="text/javascript" src="resources/js/i18n.js"></script>
+
+	<?php require_once('lib/services_start.php'); ?>
 </body>
 </html>
diff --git a/src/js/livechroma.js b/src/js/livechroma.js
@@ -1,4 +1,4 @@
-/* globals photoBooth MarvinColorModelConverter AlphaBoundary MarvinImage Seriously */
+/* globals photoBooth MarvinColorModelConverter AlphaBoundary MarvinImage Seriously rotaryController */
 /* exported setBackgroundImage setMainImage */
 let mainImage;
 let mainImageWidth;
@@ -266,13 +266,18 @@ $('.takeChroma, .newchroma').on('click', function (e) {
     const chromaInfo = photoBooth.getTranslation('chromaInfoAfter');
 
     photoBooth.thrill('chroma');
+
     if ($('.chroma-control-bar').is(':visible')) {
         $('.chroma-control-bar').hide();
         $('.backgrounds').hide();
 
         setTimeout(() => {
             $('.chromaNote').show();
             $('.chromaNote').text(chromaInfo);
+            $('.chroma-control-bar > .takeChroma').hide();
+            $('.chroma-control-bar > .deleteBtn').hide();
+            $('.chroma-control-bar > .reloadPage').show();
+            $('.chroma-control-bar').show();
         }, config.picture.cntdwn_time * 1000);
     }
 });
@@ -321,3 +326,13 @@ $('.gallerybtn').on('click', function (e) {
 
     photoBooth.openGallery($(this));
 });
+
+// Close Button
+$('.closebtn').on('click', function () {
+    location.assign('./index.php');
+});
+
+$(document).ready(function () {
+    console.log('DOM ready');
+    rotaryController.focusSet('#start');
+});
diff --git a/src/js/remotebuzzer_client.js b/src/js/remotebuzzer_client.js
@@ -164,7 +164,7 @@ function initRemoteBuzzerFromDOM() {
                     .find('i.fa')
                     .css('z-index', '1');
             } else {
-                const buttonList = $('.focused').parents('.rotarygroup').find('.rotaryfocus');
+                const buttonList = $('.focused').parents('.rotarygroup').find('.rotaryfocus:visible');
                 let focusIndex = buttonList.index($('.focused'));
 
                 if (buttonList.eq(focusIndex + 1).exists()) {
@@ -176,10 +176,12 @@ function initRemoteBuzzerFromDOM() {
                 $('.focused')
                     .removeClass('focused')
                     .parents('.rotarygroup')
-                    .find('.rotaryfocus')
+                    .find('.rotaryfocus:visible')
                     .eq(focusIndex)
                     .addClass('focused')
                     .focus();
+
+                console.log('set focus to', $('.focused'));
             }
         };
 
@@ -206,7 +208,7 @@ function initRemoteBuzzerFromDOM() {
                         .css('z-index', '1');
                 }
             } else {
-                const buttonList = $('.focused').parents('.rotarygroup').find('.rotaryfocus');
+                const buttonList = $('.focused').parents('.rotarygroup').find('.rotaryfocus:visible');
                 const focusIndex = buttonList.index($('.focused'));
 
                 if (buttonList.eq(focusIndex - 1).exists()) {
diff --git a/src/sass/modern_live_chromakeying.scss b/src/sass/modern_live_chromakeying.scss
@@ -50,3 +50,7 @@
     }
   }
 }
+
+.pswp-rotary-focus {
+  background: radial-gradient(grey, $mainColor, $hoverColor) !important;
+}

Original file line number	Diff line number	Diff line change
`@@ -50,3 +50,7 @@`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`	`}`
	`53`	`+`
	`54`	`+.pswp-rotary-focus {`
	`55`	`+ background: radial-gradient(grey, $mainColor, $hoverColor) !important;`
	`56`	`+}`