diff --git a/static/css/sb.css b/static/css/sb.css index a64345a..9a19065 100644 --- a/static/css/sb.css +++ b/static/css/sb.css @@ -1,19 +1,39 @@ +#canvas-container { + position: relative; + display: none; +} + +#header { + margin-left: 15px; +} #sb-video { - width: 320px; - height: 240px; - margin: 15px; - float: left; + width: 640px; + height: 480px; + position: relative; + z-index: 100; } #sb-canvas { - width: 320px; - height: 240px; - margin: 15px; - float: left; + width: 640px; + height: 480px; + position: absolute; + top: 0px; + left: 0px; + background-color: rgba(0, 0, 0, 0); + z-index: 1000; } -button { - clear:both; - margin: 30px; +#sb-message { + visibility: hidden; } + +/* +#sb-message-text { + position: absolute; + left: 10px; + bottom: 20px; + z-index: 10000; +} +*/ + diff --git a/static/index.html b/static/index.html index c1f1a67..3785e32 100644 --- a/static/index.html +++ b/static/index.html @@ -4,22 +4,42 @@ toot-my-t-shirt + + -
-

toot-my-t-shirt

-
- +
+ -
- + +
+ + + + +
+ +
+
+ + +
+
+ will be gone in few seconds! +
- - - -
diff --git a/static/js/sb.js b/static/js/sb.js index 6136fb5..85139e5 100644 --- a/static/js/sb.js +++ b/static/js/sb.js @@ -51,7 +51,7 @@ var countdown = { function runCamera(stream) { console.log("initialize the camera"); - var video = document.querySelector("video"); + var video = document.querySelector("#sb-video"); video.width = video.offsetWidth; video.onloadedmetadata = function() { video.play(); @@ -64,19 +64,26 @@ function sendData(data) { var xhr = new XMLHttpRequest(); var boundary = "youarenotsupposedtolookatthis"; var formData = new FormData(); + var msg = ""; formData.append("selfie", new Blob([data]), "selfie.jpeg"); fetch("/publish/", { method: "POST", body: formData }).then(function(response) { if (response.status !== 200) { - console.log("something went wrong sending the data: " + response.status); + msg = "something went wrong sending the data: " + response.status; + console.log(msg); + M.toast({"html": msg}); } else { - console.log("photo was sent successfully"); + msg = "photo was sent successfully!"; + console.log(msg); + M.toast({"html": msg}); } cancelPhoto(); }).catch(function(err) { - console.log("something went wrong connecting to server: " + err); + msg = "something went wrong connecting to server: " + err; + console.log(msg); + M.toast({"html": msg}); cancelPhoto(); }); } @@ -84,7 +91,10 @@ function sendData(data) { function cancelPhoto() { console.log("cancel photo"); - var canvas = document.querySelector("canvas"); + document.querySelector("#sb-message").style.visibility = "hidden"; + document.querySelector("#send-photo-btn").classList.add("disabled"); + document.querySelector("#cancel-photo-btn").classList.add("disabled"); + var canvas = document.querySelector("#sb-canvas"); var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); countdown.stop(); @@ -107,9 +117,12 @@ function isBlank(canvas) { function sendPhoto() { console.log("send photo"); countdown.stop(); - var canvas = document.querySelector("canvas"); + document.querySelector("#sb-message").style.visibility = "hidden"; + var canvas = document.querySelector("#sb-canvas"); if (isBlank(canvas)) { - console.log("cowardly refuse to send a blank image.") + var msg = "I cowardly refuse to send a blank image."; + console.log(msg) + M.toast({"html": msg}); return; } return sendData(canvas.toDataURL("image/jpeg")); @@ -118,8 +131,9 @@ function sendPhoto() { function takePhoto() { console.log("take photo"); - var video = document.querySelector("video"); - var canvas = document.querySelector("canvas"); + document.querySelector("#sb-message").style.visibility = "visible"; + var video = document.querySelector("#sb-video"); + var canvas = document.querySelector("#sb-canvas"); var tmpCanvas = document.createElement("canvas"); tmpCanvas.width = video.offsetWidth; @@ -136,12 +150,15 @@ function takePhoto() { var scale = canvas.width / tmpCanvas.width; context.scale(scale, scale); context.drawImage(tmpCanvas, 0, 0); + document.querySelector("#send-photo-btn").classList.remove("disabled"); + document.querySelector("#cancel-photo-btn").classList.remove("disabled"); countdown.start(5, cancelPhoto, updateSendCountdown); } function initCamera() { console.log("request camera permission"); + document.querySelector("#canvas-container").style.display = "block"; var videoObj = { "video": { width: 800, @@ -152,9 +169,12 @@ function initCamera() { navigator.mediaDevices.getUserMedia(videoObj).then(function(stream) { runCamera(stream); + document.querySelector("#init-btn").style.display = "none"; + document.querySelector("#take-photo-btn").classList.remove("disabled"); }).catch(function(err) { console.log("unable to open camera"); console.log(err); + M.toast({"html": "unable to open camera; please reload this page: " + err}); }); }