Apply filter on picture taken

andreknieriem · Nov 17, 2019 · 96144af · 96144af
1 parent 72291f2
commit 96144af
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -1,63 +1,82 @@
-# photobooth by Andre Rinas
-A Photobooth webinterface for Raspberry Pi and Windows.
+# Photobooth by Andre Rinas
+
+A Photobooth web interface for Raspberry Pi and Windows.
 
 ## :heart_eyes: Features
+
 - Works on Windows and Linux.
-  - Under Windows [digiCamControl](http://digicamcontrol.com/) by Duka Istvan can be used to control the camera and to take pictures.
-  - Under Linux [gPhoto2](http://gphoto.org/) is used to control the camera and to take pictures.
+  - Under Windows [digiCamControl](http://digicamcontrol.com/) by Duka Istvan
+    can be used to control the camera and to take pictures.
+  - Under Linux [gPhoto2](http://gphoto.org/) is used to control the camera and
+    to take pictures.
 - Images are processed with GD.
 - Photobooth caches all generated QR-Codes, Thumbnails and Prints.
 - Standalone Gallery (`localhost/gallery.php`).
 - Settings can be changed via Admin Panel (under `localhost/admin`):
   - Multi-language support:
-      - german
-      - english
-      - spanish
-      - french
-      - greek
+    - German
+    - English
+    - Spanish
+    - French
+    - Greek
   - Gallery:
-      - Order pictures in gallery ascending oder descending by picture age.
-      - Hide the gallery.
-  - Choose between md5format and dateformat image names.
-  - Choose an image filter before taking a picture.
+    - Order pictures in gallery ascending oder descending by picture age.
+    - Hide the gallery.
+  - Choose between md5- or date-formatted image names.
+  - Choose an image filter after taking a picture.
   - QR-Code to allow downloading pictures from your Photobooth.
+  - Pictures can be directly downloaded from the gallery.
   - Print feature.
-    - Optional: Print a frame on your picture (replace resources/img/frames/frame.png with a proper frame).
+    - Optional: Print a frame on your picture
+      (replace `resources/img/frames/frame.png` with a frame of your choice).
     - Optional: Print text on your picture.
     - Optional: Print QR-Code on the right side of your picture.
-  - Pictures can be send via E-Mail.
+  - Pictures can be sent via e-mail.
   - LivePreview (uses device cam).
-  - Event (e.g. wedding, birthday) specifig config to show a symbol (e.g. heart) betweeen some text on the startpage.
+  - Event specific (e.g. wedding, birthday) config to show a symbol (e.g. heart)
+    between some text on the start page.
   - Green screen keying (chroma keying).
-  - Photo collage function: take 4 pictures in a row with or without interruption and let it generate a collage out of it.
-  - Save pictures with a polaroid effect.
+  - Photo collage function: take 4 pictures in a row with or without
+    interruption and let it generate a collage out of it.
+  - Save pictures with a Polaroid effect.
   - Adjust take picture and print commands.
   - Optional Blue-gray theme.
   - And many more options to adjust Photobooth for your personal needs.
 
 ## :camera: Screenshots
+
 ![](https://raw.githubusercontent.com/wiki/andreknieriem/photobooth/images/start.png)
 
 ## :gear: Prerequisites
+
 - gphoto2 installed, if used on a Raspberry for DSLR control
 - digiCamControl, if used unter Windows for DSLR control
 - NGINX, Lighttpd or Apache
 
 ## :wrench: Installation & Troubleshooting
-Please follow the installation instructions in our [Photobooth-Wiki](https://github.com/andreknieriem/photobooth/wiki) to setup Photobooth.
 
-If you're having trouble or questions please take a look at our [FAQ](https://github.com/andreknieriem/photobooth/wiki#faq---frequently-asked-questions) before opening a new issue.
+Please follow the installation instructions in our
+[Photobooth-Wiki](https://github.com/andreknieriem/photobooth/wiki) to setup
+Photobooth.
+
+If you're having trouble or questions please take a look at our
+[FAQ](https://github.com/andreknieriem/photobooth/wiki#faq---frequently-asked-questions)
+before opening a new issue.
 
 ### :mag: Changelog
+
 Please take a look at the changelog in our [Photobooth Wiki](https://github.com/andreknieriem/photobooth/wiki/changelog).
 
 ### :mortar_board: Tutorial
+
 [Raspberry Pi Weddingphotobooth (german)](https://www.andrerinas.de/tutorials/raspberry-pi-einen-dslr-weddingphotobooth-erstellen.html)
 
 ### :clap: Contributors and thanks to
+
 - [dimsemenov](https://github.com/dimsemenov/photoswipe) for photoswipe
 - [t0k4rt](https://github.com/t0k4rt/phpqrcode) for phpqrcode
-- [nihilor](https://github.com/nihilor/photobooth) for Printing feature, code rework and bugfixes
+- [nihilor](https://github.com/nihilor/photobooth) for Printing feature,
+  code rework and bugfixes
 - [vrs01](https://github.com/vrs01)
 - [F4bsi](https://github.com/F4bsi)
 - [got-x](https://github.com/got-x)

diff --git a/index.php b/index.php
@@ -77,11 +77,6 @@
 				</div>
 				<?php endif; ?>
 
-				<?php if ($config['use_filter']): ?>
-				<a href="#" class="btn imageFilter"><i class="fa fa-magic"></i> <span
-						data-l10n="selectFilter"></span></a>
-				<?php endif; ?>
-
 				<?php if ($config['force_buzzer']): ?>
 				<div id="useBuzzer">
 						<span data-l10n="use_button"></span>
@@ -165,6 +160,10 @@
 					<?php endif; ?>
 				<?php endif; ?>
 
+				<?php if ($config['use_filter']): ?>
+				<a href="#" class="btn imageFilter"><i class="fa fa-magic"></i> <span data-l10n="selectFilter"></span></a>
+				<?php endif; ?>
+
 				<a href="#" class="btn deletebtn"><i class="fa fa-trash"></i> <span data-l10n="delete"></span></a>
 			</div>
 

diff --git a/lib/db.php b/lib/db.php
@@ -15,9 +15,10 @@ function getImagesFromDB() {
 function appendImageToDB($filename) {
 	$images = getImagesFromDB();
 
-	$images[] = $filename;
-
-	file_put_contents(DB_FILE, json_encode($images));
+	if (!in_array($filename, $images)) {
+		$images[] = $filename;
+		file_put_contents(DB_FILE, json_encode($images));
+	}
 }
 
 function deleteImageFromDB($filename) {

diff --git a/resources/js/core.js b/resources/js/core.js
@@ -184,6 +184,11 @@ const photoBooth = (function () {
         jQuery.post('api/takePic.php', data).done(function (result) {
             console.log('took picture', result);
 
+            // reset filter (selection) after picture was taken
+            imgFilter = config.default_imagefilter;
+            $('#mySidenav .activeSidenavBtn').removeClass('activeSidenavBtn');
+            $('#' + imgFilter).addClass('activeSidenavBtn');
+
             if (result.error) {
                 public.errorPic(result);
             } else if (result.success === 'collage' && (result.current + 1) < result.limit) {
@@ -315,7 +320,7 @@ const photoBooth = (function () {
         const preloadImage = new Image();
         preloadImage.onload = () => {
             resultPage.css({
-                'background-image': `url(${imageUrl})`,
+                'background-image': `url(${imageUrl}?filter=${imgFilter})`,
             });
             resultPage.attr('data-img', filename);
 
@@ -332,6 +337,7 @@ const photoBooth = (function () {
                 public.resetTimeOut();
             }
         };
+
         preloadImage.src = imageUrl;
     }
 
@@ -465,14 +471,14 @@ const photoBooth = (function () {
 
     $('.sidenav > div').on('click', function () {
         $('.sidenav > div').removeAttr('class');
-
         $(this).addClass('activeSidenavBtn');
 
         imgFilter = $(this).attr('id');
-
+        const result = {file: $('#result').attr('data-img')};
         if (config.dev) {
-            console.log('Active filter', imgFilter);
+            console.log('Applying filter', imgFilter, result);
         }
+        public.processPic(imgFilter, result);
     });
 
     // Take Picture Button

diff --git a/resources/js/photoinit.js b/resources/js/photoinit.js
@@ -124,8 +124,8 @@ function initPhotoSwipeFromDOM (gallerySelector) {
             const img = gallery.currItem.src.split('/').pop();
 
             $('.pswp__button--download').attr({
-              href: 'api/download.php?image=' + img,
-              download: img,
+                href: 'api/download.php?image=' + img,
+                download: img,
             });
         });