Merge pull request #26 from porkbuns/frontend-fixes

Frontend tweaks: fixed issue where flash ends before the photo is taken....
porkbuns · Nov 2, 2014 · 7506027 · 7506027
2 parents 455636c + 8be84c2
commit 7506027
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 deletions.
diff --git a/app.coffee b/app.coffee
@@ -5,9 +5,11 @@ sys = require "sys"
 fs = require "fs"
 yaml = require "yaml"
 dotenv = require "dotenv"
+exec = require("child_process").exec
 
 dotenv.load()
 console.log("printer is: #{process.env.PRINTER_ENABLED}")
+
 PhotoFileUtils = require("./lib/photo_file_utils")
 StubCameraControl = require("./lib/stub_camera_control")
 CameraControl = require("./lib/camera_control")
@@ -16,8 +18,6 @@ ImageCompositor = require("./lib/image_compositor")
 exp = express()
 web = http.createServer(exp)
 
-exec = require("child_process").exec
-
 exp.configure ->
   exp.set "views", __dirname + "/views"
   exp.set "view engine", "jade"

diff --git a/public/javascripts/frontend/camera_utils.js b/public/javascripts/frontend/camera_utils.js
@@ -12,14 +12,17 @@ function CameraUtils() {};
  *   Typically, this wraps the command to fire the shutter.
  */
 CameraUtils.snap = function(idx, cheeseCb) {
-    p.zoomFrame(idx, 'in');
-    p.modalMessage('Ready?', Config.READY_DELAY);
-    setTimeout(function() {
-        p.modalMessage('Cheese!', Config.CHEESE_DELAY);
-        cheeseCb();
-        p.flashEffect(Config.FLASH_DURATION);
-    }, Config.READY_DELAY);
-
+  p.zoomFrame(idx, 'in');
+  // These guys need to be promises.
+  p.modalMessage('Ready?', Config.READY_DELAY, 200, function() {
+    p.modalMessage("3", 1000, 200, function() {
+      p.modalMessage("2", 1000, 200,  function() {
+        p.modalMessage("1", 1000, 200, function() {
+          cheeseCb();
+        });
+      });
+    });
+  });
 }
 
 /**

diff --git a/public/javascripts/frontend/photo_view.js b/public/javascripts/frontend/photo_view.js
@@ -240,13 +240,28 @@ var PhotoView = Backbone.View.extend({
    * Faux camera flash
    */
   flashEffect: function(duration) {
-      if (duration === undefined) { duration = 200; }
-      var rect = this.canvas.rect(0, 0, this.config.WINDOW_WIDTH, this.config.WINDOW_HEIGHT);
-      rect.attr({'fill': 'white', 'opacity': 0});
-      rect.animate({'opacity': 1}, duration, ">", function() {
-          rect.animate({'opacity': 0}, duration, "<");
-          rect.remove();
-      })
+    if (duration === undefined) { duration = 200; }
+    var rect = this.canvas.rect(0, 0, this.config.WINDOW_WIDTH, this.config.WINDOW_HEIGHT);
+    rect.attr({'fill': 'white', 'opacity': 0});
+    rect.animate({'opacity': 1}, duration, ">", function() {
+      rect.animate({'opacity': 0}, duration, "<");
+      rect.remove();
+    })
+  },
+
+  flashStart: function(duration) {
+    if (duration === undefined) { duration = 200; }
+    this.rect = this.canvas.rect(0, 0, this.config.WINDOW_WIDTH, this.config.WINDOW_HEIGHT);
+    this.rect.attr({'fill': 'white', 'opacity': 0});
+    this.rect.animate({'opacity': 1}, duration, ">")
+  },
+
+  flashEnd: function(duration) {
+    if (duration === undefined) { duration = 200; }
+    var self = this;
+    this.rect.animate({'opacity': 0}, duration, "<", function() {
+      self.remove();
+    });
   },
 
   /**

diff --git a/public/javascripts/frontend/shmile.js b/public/javascripts/frontend/shmile.js
@@ -18,7 +18,6 @@ $(window).ready(function() {
   // Position the start button in the center
   startButton.css({'top': buttonY, 'left': buttonX});
 
-
   var buttonTriggerEvt = Config.IS_MOBILE ? "touchend" : "click";
 
   startButton.bind(buttonTriggerEvt, function(e) {
@@ -96,23 +95,28 @@ var fsm = StateMachine.create({
     onenterready: function() {
       p.resetState();
     },
+    onleaveready: function() {
+    },
     onenterwaiting_for_photo: function(e) {
-      var randomId = Math.ceil(Math.random()*100000);
       cheeseCb = function() {
+        p.modalMessage('Cheese!', Config.CHEESE_DELAY);
+        p.flashStart();
         socket.emit('snap', true);
       }
       CameraUtils.snap(State.current_frame_idx, cheeseCb);
     },
     onphoto_saved: function(e, f, t, data) {
       // update UI
       // By the time we get here, the idx has already been updated!!
+      p.flashEnd();
       p.updatePhotoSet(data.web_url, State.current_frame_idx, function() {
         setTimeout(function() {
           fsm.photo_updated();
         }, Config.BETWEEN_SNAP_DELAY)
       });
     },
     onphoto_updated: function(e, f, t) {
+      p.flashEnd();
       // We're done with the full set.
       if (State.current_frame_idx == 3) {
         fsm.finish_set();