Apply filter on picture taken

Change-Id: I48b47aad2226a8043069af1404b1f16a3bb06722

README.md

@@ -23,7 +23,7 @@ A Photobooth web interface for Raspberry Pi and Windows.
     - 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 before taking a picture.
+  - 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.

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>
 

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) {

resources/js/core.js

@@ -185,6 +185,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) {
@@ -318,7 +323,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);
 
@@ -468,14 +473,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