andi34 · andi34 · Mar 22, 2021 · Mar 1, 2021 · Mar 2, 2021 · Mar 8, 2021
diff --git a/button.py b/button.py
diff --git a/chromakeying.php b/chromakeying.php
@@ -59,7 +59,7 @@
 		<?php endif; ?>
 	</head>
 <body data-main-image="<?=$mainimage?>">
-	<div class="chromawrapper">
+	<div class="chromawrapper rotarygroup">
 	<?php if ($keying_possible): ?>
 		<div class="canvasWrapper initial">
 			<canvas id="mainCanvas"></canvas>
@@ -71,20 +71,20 @@
 				$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 class="<?php echo $btnClass1; ?>" id="save-btn" href="#"><i class="fa fa-floppy-o"></i> <span data-i18n="save"></span></a>
+			<a class="<?php echo $btnClass1; ?> rotaryfocus" id="save-btn" href="#"><i class="fa fa-floppy-o"></i> <span data-i18n="save"></span></a>
 
 			<?php if ($config['print']['from_chromakeying']): ?>
-				<a class="<?php echo $btnClass1; ?>" id="print-btn" href="#"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
+				<a class="<?php echo $btnClass1; ?> rotaryfocus" id="print-btn" href="#"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
 			<?php endif; ?>
 
-			<a class="<?php echo $btnClass1; ?>" id="close-btn" href="#"><i class="fa fa-times"></i> <span data-i18n="close"></span></a>
+			<a class="<?php echo $btnClass1; ?> rotaryfocus" id="close-btn" href="#"><i class="fa fa-times"></i> <span data-i18n="close"></span></a>
 		</div>
 	<?php else:?>
 		<div style="text-align:center;padding-top:250px">
@@ -109,9 +109,12 @@
 	<script type="text/javascript" src="vendor/Seriously/seriously.js"></script>
 	<script type="text/javascript" src="vendor/Seriously/effects/seriously.chroma.js"></script>
 	<?php endif; ?>
+	<script type="text/javascript" src="resources/js/remotebuzzer_client.js"></script>
 	<script type="text/javascript" src="resources/js/chromakeying.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/config/config.inc.php b/config/config.inc.php
@@ -20,7 +20,7 @@
 $config['dev']['error_messages'] = true;
 $config['dev']['reload_on_error'] = true;
 $config['qr']['enabled'] = true;
-$config['webserver']['ip'] = null;
+$config['webserver']['ip'] = '127.0.0.1';
 $config['webserver']['ssid'] = 'Photobooth';
 $config['download']['enabled'] = true;
 $config['download']['thumbs'] = false;
@@ -225,16 +225,19 @@
 
 // R E M O T E   B U Z Z E R
 $config['remotebuzzer']['enabled'] = false;
+$config['remotebuzzer']['userotary'] = false;
+$config['remotebuzzer']['picturebutton'] = true;
 // collagetime controls the time to distinguish picture from collage in seconds
 $config['remotebuzzer']['collagetime'] = '2';
-$config['remotebuzzer']['port'] = 14711;
-$config['remotebuzzer']['picturebutton'] = true;
 $config['remotebuzzer']['picturegpio'] = 21;
 $config['remotebuzzer']['collagebutton'] = false;
 $config['remotebuzzer']['collagegpio'] = 20;
+$config['remotebuzzer']['printbutton'] = false;
+$config['remotebuzzer']['printgpio'] = 26;
 $config['remotebuzzer']['shutdownbutton'] = false;
 $config['remotebuzzer']['shutdowngpio'] = 16;
 $config['remotebuzzer']['shutdownholdtime'] = '5';
+$config['remotebuzzer']['port'] = 14711;
 
 
 // S Y N C  T O  U S B  S T I C K

diff --git a/faq/faq.md b/faq/faq.md
@@ -112,38 +112,46 @@ Follow the steps mentioned here: [How to Fix NGINX 413 Request Entity Too Large
 
 <hr>
 
-### Can I use Hardware Button to take a Picture on my Raspberry Pi?
-When the photobooth display / screen is directly connected to the Raspberry Pi, this is a simple way to use a hardware button connected on GPIO24 to trigger a photo. Set the "Take Pictures key" to `13` (enter key) via Admin panel to specify the key. Next you have to install some dependencies:
+### Can I use Hardware Button on my Raspberry Pi, to take a Picture ?
+Yes, the **Hardware Button** feature enables to control Photobooth through hardware buttons connected to Raspberry GPIO pins . This works for directly connected screens and as well for WLAN connected screen (i.e. iPad). Configuration takes place in the admin settings - Hardware Button section.
 
-```
-sudo apt install libudev-dev
-sudo pip install python-uinput
-echo "uinput" | sudo tee -a /etc/modules
-```
+The Hardware Button functionality supports two separate modes of operation (select via admin panel):
+- **Button Mode**: Distinct hardware buttons can be connected to distinct GPIOs. Each button will trigger a separate functionality (i.e. take photo).
+- **Rotary Mode**: A rotary encoder connected to GPIOs will drive the input on the screen. This enables to use the rotary to scroll through the Photobooth UI buttons, and click to select actions. 
+Modes can not be combined.
+
+In any mode, Photobooth will watch GPIOs for a PIN_DOWN event - so the hardware button needs to pull the GPIO to ground, for to trigger. This requires the GPIOs to be configured in PULLUP mode - always. 
+
+Troubleshooting / Debugging:
 
-After a reboot (`sudo shutdown -r now`), you should check if the uinput kernel module is loaded by executing `lsmod | grep uinput`. If you get some output, everything is fine.
+- **Important: For WLAN connected screens you must make sure to set the IP address of the Photobooth web server in the admin settings - section "General"**. The loopback IP (127.0.0.1) does not work, it has to be the exact IP address of the Photobooth web server, to which the remote display connects to.
+- Switch Photobooth to DEV mode. (admin screen -> expert view -> general section)
+- Reload the Photobooth homepage
+- Check the browser developer console for error logs
+- Check the server logs for errors (file `data/tmp/remotebuzzer_server.log`).
+- If there is no errors logged but hardware buttons still do not trigger
+ - GPIO interrupts might be disabled. Check file `/boot/config.txt` and remove / disable the following overlay `dtoverlay=gpio-no-irq` to enable interrupts for GPIOs.
+ - GPIOs may not be configured as PULLUP. The configuration for this is done in fie `/boot/config.txt` by adding the GPIO numbers in use as follows - you **must reboot** the Raspberry Pi in order to activate changes in this setting. 
 
-You also need to run a python script in background to read the state of GPIO24 and send the key if hardware button is pressed to trigger the website to take a photo.
 ```
-sudo crontab -e
-@reboot python /var/www/html/button.py &
+         gpio=16,20,21,26=pu
 ```
 
-<hr>
+- For the Shutdown button to work, `www-data` needs to have the necessary sudo permissions. This is done by the `install-raspian.sh` script or can be manually added as
 
-### Hardware Button for WLAN connected screen (i.e. iPad) - Remote Buzzer Server
-This feature enables multiple GPIO pin connected hardware buttons (buzzer) in a setup where the display / screen is connected via WLAN / network to the photobooth webserver (e.g. iPad). Configuration takes place in the admin settings - Remote Buzzer Server area.
+```
+     cat >> /etc/sudoers.d/020_www-data-shutdown << EOF
+     www-data ALL=(ALL) NOPASSWD: /sbin/shutdown
+     EOF
+```
 
-Troubleshooting / Debugging:
+As of Photobooth v3, hardware button support is fully integrated into Photobooth. Therefore the `button.py` script has been removed from the distribution. In case you are using this script and for continued backward compatibility please do not activate the Remote Buzzer Hardware Button feature in the admin GUI. Please note that continued backward compatibility is not guaranteed and in case of issues please switch to the integrated functionality.
 
-- **Important: You must make sure to set the IP address of the Photobooth web server in the admin settings - section "General"**. The loopback IP (127.0.0.1) does not work, it has to be the exact IP address of the Photobooth web server, to which the remote display connects to. 
-- Switch on dev settings for server logs to be written to the "tmp" directory of the photobooth installation (i.e. `data/tmp/remotebuzzer_server.log`). Clients will log server communication information to the browser console.
-- If hardware buttons do not trigger, GPIO interrupts might be disabled. Check file `/boot/config.txt` and remove / disable the following overlay `dtoverlay=gpio-no-irq` to enable interrupts for GPIOs.
 
 ***************
-Hardware Button (Buzzer)
+**Button Mode**
 ***************
-The server supports up to three connected hardware buttons for the following functionalities.
+The server supports up to three connected hardware buttons for the following functionalities:
 
 1) **Picture Button**
 
@@ -163,20 +171,42 @@ Note:
 
 Note:
 - If collage is configured with interruption, next button presses will trigger the next collage pictures. 
- - If collage is disabled in the admin settings, this button will do nothing even if it is activated in the admin settings
+- If collage is disabled in the admin settings (Collage section), this button will do nothing.
 
 3) **Shutdown Button**
 
 - Defaults to GPIO16
 - This button will initate a safe system shutdown and halt (`shutdown -h now`).
 
 Note:
-- One needs to hold the button for a defined time to initiate the shut down (defaults to 3 seconds). This can be adjusted in the admin settings.
+- Hold the button for a defined time to initiate the shut down (defaults to 5 seconds). This can be adjusted in the admin settings.
 - The shutdown button will only trigger if there is currently no action in progress in Photobooth (picture, collage). 
 
-All hardware buttons connect to a GPIO pin and the server will watch for a PIN_DOWN event (pull to ground). This will initiate a message to the photobooth screen over network / WLAN, to trigger the action (thrill).
+After any button is triggered, all hardware button remain disabled until the action (picture / collage) completed. Once completed, the hardware buttons re-arms / are active again.
+
+***************
+**Rotary Mode**
+***************
+In rotary mode a rotary encoder (i.e. [KY-040](https://sensorkit.en.joy-it.net/index.php?title=KY-040_Rotary_encoder)) is connected to the GPIOs. Turning the rotary left / right will navigate through the currently visible set of buttons on the screen. Button press on the rotary will activate the currently highlighted button in Photobooth.
+
+The wiring layout is
+
+```
+Button                          Rotary Encoder
+Mode           Raspberry        Mode
+
+Picture  ---   GPIO 21    ---   DT
+Collage  ---   GPIO 20    ---   CLK
+Shutdown ---   GPIO 16    ---   SW
+                3V3       ---   +
+                GND       ---   GND
+```
 
-After triggered, the hardware button remains disabled until an action (picture / collage) has fully completed. Then the hardware button re-arms / is active again.
+Known limitations:
+The following elements are currently not supported and not accessible through the rotary navigation
+- Full Screen Mode button: Looks like modern browser only allow to change to full screen mode upon user gesture. It seems not possible to change to full-screen using Javascript.
+- Photoswipe download button: Not needed for Rotary Control. (well, if you can come up with a decent use-case, let us know).
+- Delete Picture
 
 **************
 Other Remote Trigger (experimental)
@@ -187,7 +217,7 @@ The trigger server controls and coordinates sending commands via socket.io to th
 - Commands: `start-picture`, `start-collage`
 - Response: `completed`  will be emitted to the client, once photobooth finished the task
 
-This functionality is experimental and largely untested. Not sure if there is a use-case but if you have one, happy to learn about it. 
+This functionality is experimental and largely untested. Not sure if there is a use-case but if you have one, happy to learn about it. Currently this does not support rotary encoder use but could be if needed.
 
 <hr>
 

diff --git a/index.php b/index.php
@@ -79,13 +79,13 @@
 
 		<!-- image Filter Pane -->
 		<?php if ($config['filters']['enabled']): ?>
-		<div id="mySidenav" class="dragscroll sidenav">
-			<a href="#" class="closebtn <?php echo $btnClass2; ?>"><i class="fa fa-times"></i></a>
+		<div id="mySidenav" class="dragscroll sidenav rotarygroup">
+			<a href="#" class="closebtn <?php echo $btnClass2; ?> rotaryfocus"><i class="fa fa-times"></i></a>
 
 			<?php foreach(AVAILABLE_FILTERS as $filter => $name): ?>
 				<?php if (!in_array($filter, $config['filters']['disabled'])): ?>
 					<div id="<?=$filter?>" class="filter <?php if($config['filters']['defaults'] === $filter)echo 'activeSidenavBtn'; ?>">
-						<a class="btn btn--small" href="#"><?=$name?></a>
+						<a class="btn btn--small rotaryfocus" href="#"><?=$name?></a>
 					</div>
 				<?php endif; ?>
 			<?php endforeach; ?>
@@ -108,43 +108,43 @@
 				</div>
 				<div class="cheese"></div>
 				<div class="loaderImage"></div>
-				<div class="loading"></div>
+				<div class="loading rotarygroup"></div>
 			</div>
 		</div>
 
 		<!-- Result Page -->
-		<div class="stages" id="result">
-			<a href="#" class="<?php echo $btnClass1; ?> homebtn"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
+		<div class="stages rotarygroup" id="result">
+			<a href="#" class="<?php echo $btnClass1; ?> homebtn rotaryfocus"><i class="fa fa-home"></i> <span data-i18n="home"></span></a>
 			<div class="resultInner hidden">
 				<?php if ($config['gallery']['enabled']): ?>
-				<a href="#" class="<?php echo $btnClass1; ?> gallery-button"><i class="fa <?php echo $galleryIcon; ?>"></i> <span data-i18n="gallery"></span></a>
+				<a href="#" class="<?php echo $btnClass1; ?> gallery-button rotaryfocus" ><i class="fa <?php echo $galleryIcon; ?>"></i> <span data-i18n="gallery"></span></a>
 				<?php endif; ?>
 
 				<?php if ($config['qr']['enabled']): ?>
-				<a href="#" class="<?php echo $btnClass1; ?> qrbtn"><i class="fa fa-qrcode"></i> <span data-i18n="qr"></span></a>
+				<a href="#" class="<?php echo $btnClass1; ?> qrbtn rotaryfocus"><i class="fa fa-qrcode"></i> <span data-i18n="qr"></span></a>
 				<?php endif; ?>
 
 				<?php if ($config['mail']['enabled']): ?>
-				<a href="#" class="<?php echo $btnClass1; ?> mailbtn"><i class="fa fa-envelope"></i> <span data-i18n="mail"></span></a>
+				<a href="#" class="<?php echo $btnClass1; ?> mailbtn rotaryfocus"><i class="fa fa-envelope"></i> <span data-i18n="mail"></span></a>
 				<?php endif; ?>
 
 				<?php if ($config['print']['from_result']): ?>
-				<a href="#" class="<?php echo $btnClass1; ?> printbtn"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
+				<a href="#" class="<?php echo $btnClass1; ?> printbtn rotaryfocus"><i class="fa fa-print"></i> <span data-i18n="print"></span></a>
 				<?php endif; ?>
 
 				<?php if (!$config['button']['force_buzzer']): ?>
 					<?php if (!($config['collage']['enabled'] && $config['collage']['only'])): ?>
-					<a href="#" class="<?php echo $btnClass1; ?> newpic"><i class="fa fa-camera"></i> <span data-i18n="newPhoto"></span></a>
+					<a href="#" class="<?php echo $btnClass1; ?> newpic rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="newPhoto"></span></a>
 					<?php endif; ?>
 
 					<?php if ($config['collage']['enabled']): ?>
-					<a href="#" class="<?php echo $btnClass1; ?> newcollage"><i class="fa fa-th-large"></i> <span
+					<a href="#" class="<?php echo $btnClass1; ?> newcollage rotaryfocus"><i class="fa fa-th-large"></i> <span
 							data-i18n="newCollage"></span></a>
 					<?php endif; ?>
 				<?php endif; ?>
 
 				<?php if ($config['filters']['enabled']): ?>
-				<a href="#" class="<?php echo $btnClass1; ?> imageFilter"><i class="fa fa-magic"></i> <span data-i18n="selectFilter"></span></a>
+				<a href="#" class="<?php echo $btnClass1; ?> imageFilter rotaryfocus"><i class="fa fa-magic"></i> <span data-i18n="selectFilter"></span></a>
 				<?php endif; ?>
 
 				<?php if ($config['picture']['allow_delete']): ?>
@@ -178,7 +178,7 @@
 				<label data-i18n="sendAllMail" for="mail-form-send-link"></label>
 			<?php endif; ?>
 
-			<button class="mail-form-input btn" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
+			<button class="mail-form-input btn rotaryfocus" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
 		</form>
 
 		<div id="mail-form-message" style="max-width: 75%"></div>
@@ -200,6 +200,7 @@
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe.min.js"></script>
 	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
+	<script type="text/javascript" src="resources/js/remotebuzzer_client.js"></script>
 	<script type="text/javascript" src="resources/js/photoinit.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script type="text/javascript" src="resources/js/core.js"></script>

diff --git a/install-raspbian.sh b/install-raspbian.sh
@@ -340,7 +340,7 @@ fi
 sed -i '/Photobooth/,/Photobooth End/d' /boot/config.txt
 cat >> /boot/config.txt  << EOF
 # Photobooth
-gpio=16,20,21=pu
+gpio=16,20,21,26=pu
 # Photobooth End
 EOF
 # add configuration required for www-data to be able to initiate system shutdown

diff --git a/lib/config.php b/lib/config.php
@@ -26,6 +26,9 @@
         'nodebin' => [
             'cmd' => '',
         ],
+        'shutdown' => [
+            'cmd' => '',
+        ],
     ],
     'linux' => [
         'take_picture' => [
@@ -47,6 +50,9 @@
         'nodebin' => [
             'cmd' => '/usr/bin/node',
         ],
+        'shutdown' => [
+            'cmd' => '/sbin/shutdown -h now',
+        ],
     ],
 ];
 
@@ -90,6 +96,7 @@
 $config['preview']['cmd'] = $cmds[$os]['preview']['cmd'];
 $config['preview']['killcmd'] = $cmds[$os]['preview']['killcmd'];
 $config['nodebin']['cmd'] = $cmds[$os]['nodebin']['cmd'];
+$config['shutdown']['cmd'] = $cmds[$os]['shutdown']['cmd'];
 
 $config['adminpanel']['view_default'] = 'expert';