Merge a94ffdd into 09c48c9

dodecaphonic · Apr 4, 2014 · f0bd337 · f0bd337
2 parents 09c48c9 + a94ffdd
commit f0bd337
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 1 deletion.
diff --git a/lib/balladina_web/public/css/app.css b/lib/balladina_web/public/css/app.css
@@ -12,18 +12,43 @@ body {
     font-weight: 300;
 }
 
+#header-bar {
+    background-color: #910025;
+    background-image: url("../images/logo.png");
+    background-repeat: no-repeat;
+    border-left: 16px solid 910025;
+    border-top: 10px solid 910025;
+    float: left;
+    width: 100%;
+    height: 50px;
+}
+
 #mosaic {
+    margin-top: 20px;
     float: left;
     width: 75%;
     height: 100%;
 }
 
+#super-canvas-fx {
+    position: absolute;
+    width: 320px;
+    height: 240px;
+    -moz-transform: scale(-1, 1);
+    -webkit-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+    filter: FlipH;
+}
+
 #remote-view video {
     width: 320px;
+    height: 240px;
 }
 
 #panel {
     float: left;
+    margin-top: 64px;
     width: 24%;
     height: 100%;
 }

diff --git a/lib/balladina_web/public/images/fx/blackwhite.png b/lib/balladina_web/public/images/fx/blackwhite.png
diff --git a/lib/balladina_web/public/images/fx/piratehat.png b/lib/balladina_web/public/images/fx/piratehat.png
diff --git a/lib/balladina_web/public/images/fx/remove.png b/lib/balladina_web/public/images/fx/remove.png
diff --git a/lib/balladina_web/public/images/logo.png b/lib/balladina_web/public/images/logo.png
diff --git a/lib/balladina_web/public/index.html b/lib/balladina_web/public/index.html
@@ -6,11 +6,13 @@
   </head>
 
   <body>
+    <div id="header-bar"/>
     <div id="mosaic">
       <div id="remote-view"></div>
     </div>
     <div id="panel">
-      <video id="local-view" width="320"></video>
+      <canvas id="super-canvas-fx" width="320" height="240"></canvas>
+      <video id="local-view" width="320" height="240"></video>
 
       <div id="controls"></div>
       <div id="tracks"></div>
@@ -24,6 +26,12 @@
     <div class="start-mixdown button">
       <i class="fa fa-cloud-download icon"></i>
     </div>
+    <div id="fx-remove-button" class="fx-remove button">
+      <img src="../images/fx/remove.png"/>
+    </div>
+    <div id="fx-black-white-button" class="fx-black-white button">
+      <img src="../images/fx/blackwhite.png"/>
+    </div>
   </script>
 
   <script type="text/template" id="track-template">
@@ -40,4 +48,6 @@
   <script type="text/javascript" src="/js/underscore-min.js"></script>
   <script type="text/javascript" src="/js/backbone-min.js"></script>
   <script type="text/javascript" src="/js/app.js"></script>
+  <script type="text/javascript" src="/js/emotionjs/black_white_fx.js"></script>
+  <script type="text/javascript" src="/js/emotionjs/balladina_camera_fx.js"></script>
 </html>
diff --git a/lib/balladina_web/public/js/emotionjs/balladina_camera_fx.js b/lib/balladina_web/public/js/emotionjs/balladina_camera_fx.js
@@ -0,0 +1,51 @@
+var localVideo = document.getElementById("local-view");
+
+var superCanvas = document.getElementById("super-canvas-fx");
+
+w = localVideo.width;
+h = localVideo.height;
+
+superCanvas.width = w;
+superCanvas.height = h;
+
+var context = superCanvas.getContext("2d");
+
+var fxBlackWhiteButton = document.getElementById("fx-black-white-button");
+
+var fxRemoveButton = document.getElementById("fx-remove-button");
+
+var lastFx = 0;
+
+var FILTER_DELAY = 10;//Milliseconds
+
+fxRemoveButton.onclick = function() {
+  stopFX();
+  window.clearInterval(lastFx);
+};
+
+fxBlackWhiteButton.onclick = function() {
+  startFX();
+
+  lastFx = window.setInterval(function() {
+
+    if (localVideo.paused || localVideo.ended) {
+      return;
+    }
+
+    context.drawImage(localVideo, 0, 0, w, h);
+
+    drawBlackWhiteFrame(context); 
+
+  }, FILTER_DELAY);
+
+};
+
+function startFX() {
+  localVideo.style.visibility = "hidden";
+  superCanvas.style.visibility = "visible";
+}
+
+function stopFX() {
+  localVideo.style.visibility = "visible";
+  superCanvas.style.visibility = "hidden";
+}
diff --git a/lib/balladina_web/public/js/emotionjs/black_white_fx.js b/lib/balladina_web/public/js/emotionjs/black_white_fx.js
@@ -0,0 +1,31 @@
+function drawBlackWhiteFrame(context) {
+
+  var apx = context.getImageData(0, 0, w, h);
+
+  var data = apx.data;
+
+  for (var y = 0; y < h; y ++) {
+    for (var x = 0; x < w; x ++) {
+
+      var j = y*w;
+      var i = x;
+      var pixel = (i+j)*4;
+
+      var r = data[pixel],
+          g = data[pixel+1],
+          b = data[pixel+2],
+          gray = (r+g+b)/3;
+
+      data[pixel] = gray;
+      data[pixel+1] = gray;
+      data[pixel+2] = gray;
+
+    }
+
+  }
+
+  apx.data = data;
+
+  context.putImageData(apx, 0, 0);
+
+}