Initial commit

photos/static/photo.css

@@ -0,0 +1,58 @@
+body {
+  background-color: #ddd;
+  padding: 0.5em;
+  text-align: center;
+  font-family: "Helvetica Neueu", "Helvetica", "Arial", sans;
+}
+
+button, input, #loader {
+  display: none;
+}
+
+input {
+  width: 300px;
+}
+
+#camera {
+  display: inline-block;
+  background-color: #eee;
+  width: 1280px;
+  height: 650px;
+  margin: 0.5em;
+}
+
+#camera .placeholder {
+  padding: 0.5em;
+}
+
+#snapshots {
+  height: 150px;
+  margin: 0.5em 0;
+  padding: 3px;
+
+  border: 1px solid #aaa;
+
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+#snapshots canvas, #snapshots img {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+
+  height: 100%;
+  margin-left: 3px;
+  border: 3px solid transparent;
+}
+
+#snapshots .selected {
+  border: 3px solid #000;
+}
+
+button, #upload_status, #upload_result, #loader {
+  margin: 0.5em;
+}

photos/static/photo.js

@@ -0,0 +1,153 @@
+$(function() {
+  if (window.JpegCamera) {
+    var camera; // Initialized at the end
+    //var url = "https://isonzeinterndronken.nl/11bt/photos.json/";
+    var url = "http://localhost:8000/new/";
+
+    var update_stream_stats = function(stats) {
+      $("#stream_stats").html(
+	"Mean luminance = " + stats.mean +
+	"; Standard Deviation = " + stats.std);
+
+      setTimeout(function() {camera.get_stats(update_stream_stats);}, 1000);
+    };
+
+    var take_snapshots = function(count) {
+      var snapshot = camera.capture();
+
+      if (JpegCamera.canvas_supported()) {
+	snapshot.get_canvas(add_snapshot);
+      }
+      else {
+	// <canvas> is not supported in this browser. We'll use anonymous
+	// graphic instead.
+	var image = document.createElement("img");
+	image.src = "no_canvas_photo.jpg";
+	setTimeout(function() {add_snapshot.call(snapshot, image)}, 1);
+      }
+
+      if (count > 1) {
+	setTimeout(function() {take_snapshots(count - 1);}, 500);
+      }
+    };
+
+    var add_snapshot = function(element) {
+      $(element).data("snapshot", this).addClass("item");
+
+      var $container = $("#snapshots").append(element);
+      var $camera = $("#camera");
+      var camera_ratio = $camera.innerWidth() / $camera.innerHeight();
+
+      var height = $container.height()
+      element.style.height = "" + height + "px";
+      element.style.width = "" + Math.round(camera_ratio * height) + "px";
+
+      var scroll = $container[0].scrollWidth - $container.innerWidth();
+
+      $container.animate({
+	scrollLeft: scroll
+      }, 200);
+      clear_upload_data();
+      $("#loader").show();
+      snapshot = $(element).data("snapshot");
+      snapshot.upload({api_url: url}).done(upload_done).fail(upload_fail);
+    };
+
+    var select_snapshot = function () {
+      $(".item").removeClass("selected");
+      var snapshot = $(this).addClass("selected").data("snapshot");
+    };
+
+    var clear_upload_data = function() {
+      $("#upload_status, #upload_result").html("");
+    };
+
+    var upload_snapshot = function() {
+      var api_url = $("#api_url").val();
+
+      if (!api_url.length) {
+	$("#upload_status").html("Please provide URL for the upload");
+	return;
+      }
+
+      clear_upload_data();
+      $("#loader").show();
+      $("#upload_snapshot").prop("disabled", true);
+
+      var snapshot = $(".item.selected").data("snapshot");
+      snapshot.upload({api_url: url}).done(upload_done).fail(upload_fail);
+    };
+
+    var upload_done = function(response) {
+      $("#upload_snapshot").prop("disabled", false);
+      $("#loader").hide();
+      $("#upload_status").html("Upload successful");
+      $("#upload_result").html(response);
+    };
+
+    var upload_fail = function(code, error, response) {
+      $("#upload_snapshot").prop("disabled", false);
+      $("#loader").hide();
+      $("#upload_status").html(
+	"Upload failed with status " + code + " (" + error + ")");
+      $("#upload_result").html(response);
+    };
+
+    var discard_snapshot = function() {
+      var element = $(".item.selected").removeClass("item selected");
+
+      var next = element.nextAll(".item").first();
+
+      if (!next.size()) {
+	next = element.prevAll(".item").first();
+      }
+
+      if (next.size()) {
+	next.addClass("selected");
+	next.data("snapshot").show();
+      }
+      else {
+	hide_snapshot_controls();
+      }
+
+      element.data("snapshot").discard();
+
+      element.hide("slow", function() {$(this).remove()});
+    };
+
+    var show_stream = function() {
+      $(this).hide();
+      $(".item").removeClass("selected");
+      hide_snapshot_controls();
+      clear_upload_data();
+      camera.show_stream();
+    };
+
+    var hide_snapshot_controls = function() {
+      $("#discard_snapshot, #upload_snapshot, #api_url").hide();
+      $("#upload_result, #upload_status").html("");
+      $("#show_stream").hide();
+    };
+
+    $("#take_snapshots").click(function() {take_snapshots(1);});
+    $("#snapshots").on("click", ".item", select_snapshot);
+    $("#upload_snapshot").click(upload_snapshot);
+    $("#discard_snapshot").click(discard_snapshot);
+    $("#show_stream").click(show_stream);
+    $(document).on("keypress", function (e) {
+      take_snapshots(1);
+    });
+
+    var options = {
+    }
+
+    camera = new JpegCamera("#camera", options).ready(function(info) {
+      //$("#take_snapshots").show();
+
+      $("#camera_info").html(
+	"Camera resolution: " + info.video_width + "x" + info.video_height);
+
+      this.get_stats(update_stream_stats);
+    });
+  }
+});