Add collage function

- take 4 pictures in a row and generate a collage out of it
andreknieriem · Sep 9, 2019 · 389244b · 389244b
1 parent 683d9fb
commit 389244b
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 32 deletions.
diff --git a/admin/index.php b/admin/index.php
@@ -99,6 +99,11 @@
  'name' => 'chroma_keying',
  'value' => $config['chroma_keying']
  ],
+ 'use_collage' => [
+ 'type' => 'checkbox',
+ 'name' => 'use_collage',
+ 'value' => $config['use_collage']
+ ],
  'previewFromCam' => [
  'type' => 'checkbox',
  'name' => 'previewFromCam',

diff --git a/config.inc.php b/config.inc.php
@@ -21,6 +21,7 @@
 $config['cheese_time'] = '1000'; // control time for cheeeeese!
 $config['use_filter'] = true;
 $config['chroma_keying'] = true;
+$config['use_collage'] = false;
 
 // LANGUAGE
 // possible values: en, de, fr

diff --git a/index.php b/index.php
@@ -64,6 +64,7 @@
  };
  ?>
  <?php if($config['use_filter']){ ?><a href="#" class="btn imageFilter"><i class="fa fa-magic"></i> <span data-l10n="selectFilter"></span></a><?php } ?>
+ <?php if($config['use_collage']){ ?><a href="#" <?php if($config['use_gpio_button']){ ?>accesskey="m"<?php } ?> class="btn takeCollage"><i class="fa fa-camera"></i> <span data-l10n="takeCollage"></span></a><?php } ?>
  <!-- accesskey to take a photo using alt+p (or use an external button)? -->
  <a href="#" <?php if($config['use_gpio_button']){ ?>accesskey="p"<?php } ?> class="btn takePic"><i class="fa fa-camera"></i> <span data-l10n="takePhoto"></span></a>
  </div>
@@ -128,6 +129,7 @@
  <?php if($config['use_mail']){ echo '<a href="#" class="btn mailbtn"><span class="mailbtnlabel"><i class="fa fa-cloud-download"></i> <span data-l10n="mail"></span></span></a>'; } ?>
  <?php if($config['use_print']){ echo '<a href="#" class="btn printbtn"><i class="fa fa-print"></i> <span data-l10n="print"></span></a>'; } ?>
  <a href="#" class="btn newpic"><i class="fa fa-camera"></i> <span data-l10n="newPhoto"></span></a>
+ <?php if($config['use_collage']){ echo '<a href="#" class="btn newcollage"><i class="fa fa-camera"></i> <span data-l10n="newCollage"></span></a>'; } ?>
  </div>
  <?php if($config['use_qr']){ echo '<div class="qr"></div>';} ?>
  </div>

diff --git a/lang/de.js b/lang/de.js
@@ -4,14 +4,18 @@ L10N = {
  "general_start_screen_title": "Startbildschirm (Titel)",
  "general_start_screen_subtitle": "Startbildschirm (Untertitel)",
  "takePhoto": "Foto erstellen!",
+ "takeCollage": "Collage erstellen!",
  "home": "Home",
  "qr": "QR Code",
  "mail": "E-Mail",
  "insertMail" : "Gebe deine E-Mail-Adresse ein, um das Foto zugesendet zu bekommen.",
  "sendAllMail": "Sende mir in den nächsten Tagen ein Link zu allen Bildern",
  "newPhoto": "Neues Bild",
+ "newCollage": "Neue Collage",
  "busy": "Bild wird verarbeitet ...",
+ "busyCollage": "Collage wird verarbeitet ...",
  "cheese": "Cheeeeeeeese!",
+ "cheeseCollage": "Cheeeeeeeese Collageeeeeeeeee!",
  "qrHelp": "Um das Bild auf dein Handy zu laden, verbinde dich mit dem WLAN <strong>photobooth<\/strong>",
  "error": "Es ist ein Fehler aufgetreten, bitte versuche es erneut!",
  "reload": "Seite neu laden",
@@ -80,5 +84,6 @@ L10N = {
  "wedding_symbol": "Symbol",
  "symbol": "Symbol auswählen",
  "selectFilter": "Bildfilter",
- "use_filter": "Bildfilter erlauben"
+ "use_filter": "Bildfilter erlauben",
+ "use_collage": "Foto-Collage erlauben"
 }
diff --git a/lang/en.js b/lang/en.js
@@ -4,14 +4,18 @@ L10N = {
  "general_start_screen_title": "Start screen (title)",
  "general_start_screen_subtitle": "Start screen (subtitle)",
  "takePhoto": "Take Pic!",
+ "takeCollage": "Take Collage!",
  "home": "Home",
  "qr": "QR Code",
  "newPhoto": "New Picture",
+ "newCollage": "New Collage",
  "mail": "E-Mail",
  "insertMail" : "Enter your e-mail address to receive the photo.",
  "sendAllMail": "Send me a link to all pictures in the next few days",
  "busy": "Processing",
+ "busyCollage": "Processing Collage",
  "cheese": "Cheeeeeeeese!",
+ "cheeseCollage": "Cheeeeeeeese Collageeeeeeeeeee!",
  "qrHelp": "Connect to the wifi <strong>photobooth<\/strong>, to download the picture to your smartphone.",
  "error": "Something went wrong. Please try it again",
  "reload": "Reload Page",
@@ -80,5 +84,6 @@ L10N = {
  "wedding_symbol": "Symbol",
  "symbol": "Choose a symbol",
  "selectFilter": "Image filter",
- "use_filter": "Allow image filter"
+ "use_filter": "Allow image filter",
+ "use_collage": "Allow photo collage"
 }
diff --git a/lang/fr.js b/lang/fr.js
@@ -4,14 +4,18 @@ L10N = {
  "general_start_screen_title": "Page d’accueil (Titre)",
  "general_start_screen_subtitle": "Page d’accueil (Sous-titre)",
  "takePhoto": "Prendre une photo!",
+ "takeCollage": "Prendre un photo montage!",
  "home": "Accueil",
  "qr": "QR Code",
  "mail": "e-mail",
  "insertMail": "Entrez votre adresse e-mail pour recevoir la photo.",
  "sendAllMail": "Envoyez moi le lien de toutes les photos, dans les prochains jours",
  "newPhoto": "Une autre",
+ "newCollage": "Une autre photo montage",
  "busy": "En cours de traitement",
+ "busyCollage": "En cours de traitement",
  "cheese": "Cheeeeeeeese!",
+ "cheeseCollage": "Cheeeeeeeese 4 fois !",
  "qrHelp": "Se connecter au wifi du <strong>photobooth<\/strong>, pour télécharger la photo sur votre smartphone.",
  "error": "Il y a eu un problème. Merci de réessayer",
  "reload": "Recharger la page",
@@ -80,5 +84,6 @@ L10N = {
  "wedding_symbol": "Icône",
  "symbol": "Sélectionnez le symbole",
  "selectFilter": "Filtre d'image",
- "use_filter": "Autoriser le filtre d'image"
+ "use_filter": "Autoriser le filtre d'image",
+ "use_collage": "Autoriser la fonction du montage photo"
 }
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -311,7 +311,7 @@ h3 {
  margin: auto;
  width: 200px;
  text-align: center;
- font-size: 20px;
+ font-size: 16px;
 }
 
 /* line 283, ../sass/style.scss */
@@ -607,6 +607,7 @@ hr.small {
  display: none;
  position: fixed;
  top: 0;
+ float: left;
  z-index: 1000000;
  background: #000;
 }
@@ -838,6 +839,16 @@ hr.small {
  margin-left: -125px;
 }
 
+.takeCollage {
+ text-align: center;
+ padding: 20px 40px;
+ width: 250px;
+ display: block;
+ left: 22%;
+ bottom: 170px;
+ position: absolute;
+}
+
 @media (max-width: 767px) {
  /* line 672, ../sass/style.scss */
  .takePic {

diff --git a/resources/fonts/style.css b/resources/fonts/style.css
@@ -118,7 +118,7 @@ h1 {
  float: left;
 }
 
-.resultInner .btn.newpic {
+.resultInner .btn.newpic .newcollage {
  float: right;
 }
 

diff --git a/resources/js/core.js b/resources/js/core.js
@@ -99,26 +99,51 @@ var photoBooth = (function () {
  }
 
  // Cheese
- public.cheese = function () {
- $('#counter').text('');
- $('.loading').text(L10N.cheese);
- public.takePic();
+ public.cheese = function (photoStyle) {
+ if (isdev) {
+ console.log(photoStyle);
+ }
+ if ((photoStyle=='photo')){
+ $('#counter').text('');
+ $('.loading').text(L10N.cheese);
+ } else {
+ $('#counter').text('');
+ $('.loading').text(L10N.cheeseCollage);
+ }
+ public.takePic(photoStyle);
  }
 
  // take Picture
- public.takePic = function () {
+ public.takePic = function (photoStyle) {
  processing = true;
+ if (isdev) {
+ console.log('Take Picture:' + photoStyle);
+ }
  setTimeout(function () {
  if(useVideo){
  var track = public.stream.getTracks()[0];
  track.stop();
  $('video').hide();
  }
+ if ((photoStyle=='photo')){
+ $('#counter').text('');
+ $('.spinner').show();
+ $('.loading').text(L10N.busy);
+ } else {
+ $('#counter').text('');
+ if (!isdev) {
+ setTimeout(function () {
+ $('.spinner').show();
+ $('.loading').text(L10N.busyCollage);
+ }, 7500);
+ } else {
+ $('.spinner').show();
+ $('.loading').text(L10N.busyCollage);
+ }
+ }
  $('#counter').text('');
- $('.spinner').show();
- $('.loading').text(L10N.busy);
  }, cheeseTime);
- jQuery.post("takePic.php", { filter: imgFilter }).done(function( result ){
+ jQuery.post("takePic.php",{filter: imgFilter,style: photoStyle}).done(function( result ){
  result = JSON.parse(result);
  if (result.error) {
  public.errorPic(result);
@@ -272,6 +297,44 @@ var photoBooth = (function () {
  $('.takePic, .newpic').on('click', function (e) {
  e.preventDefault();
  var target = $(e.target);
+ var photoStyle = 'photo';
+ if (target.hasClass('gallery')) {
+ public.openGallery(target);
+ } else {
+ if (!processing) {
+ if($('#mySidenav').width() > 0){
+ public.closeNav();
+ }
+ public.reset();
+ if(useVideo && navigator.mediaDevices){
+ navigator.getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false);
+ if(navigator.getMedia) {
+ navigator.mediaDevices.getUserMedia(webcamConstraints)
+ .then(function(stream) {
+ $('video').show();
+ var video = document.getElementById('video');
+ video.srcObject = stream;
+ public.stream = stream;
+ })
+ .catch(function (error) {
+ });
+ }
+ }
+ loader.slideDown('slow', 'easeOutBounce', function () {
+ public.countdown(countDown, $('#counter'),photoStyle);
+ });
+ }
+ }
+ });
+
+ // Take Collage Button
+ $('.takeCollage, .newcollage').on('click', function (e) {
+ e.preventDefault();
+ var target = $(e.target);
+ var photoStyle = 'collage';
+ if (isdev) {
+ console.log("collage");
+ }
  if (target.hasClass('gallery')) {
  public.openGallery(target);
  } else {
@@ -295,7 +358,10 @@ var photoBooth = (function () {
  }
  }
  loader.slideDown('slow', 'easeOutBounce', function () {
- public.countdown(countDown, $('#counter'));
+ if (isdev) {
+ console.log(photoStyle);
+ }
+ public.countdown(countDown, $('#counter'),photoStyle);
  });
  }
  }
@@ -547,9 +613,12 @@ var photoBooth = (function () {
  });
 
  // Countdown Function
- public.countdown = function (calls, element) {
+ public.countdown = function (calls, element, photoStyle) {
  count = 0;
  current = calls;
+ if (isdev) {
+ console.log(photoStyle);
+ }
  var timerFunction = function () {
  element.text(current);
  current--;
@@ -565,7 +634,10 @@ var photoBooth = (function () {
  if (count < calls) {
  window.setTimeout(timerFunction, 1000);
  } else {
- public.cheese();
+ if (isdev) {
+ console.log(photoStyle);
+ }
+ public.cheese(photoStyle);
  }
  count++;
  };

diff --git a/resources/sass/style.scss b/resources/sass/style.scss
@@ -277,7 +277,7 @@ h3 {
  margin: auto;
  width: 200px;
  text-align: center;
- font-size: 20px;
+ font-size: 16px;
 }
 
 .btn:active,