Home Explore Help
Register Sign In
alberanid
/
toot-my-t-shirt
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

nicer UI

Davide Alberani 5 years ago
parent
23b05c1f69
commit
90586a44d8
3 changed files with 90 additions and 30 deletions
Split View Show Diff Stats
  1. 31 11
      static/css/sb.css
  2. 30 10
      static/index.html
  3. 29 9
      static/js/sb.js

+ 31 - 11
static/css/sb.css
View File 

@@ -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;
 
+}
 
+*/
 
+

+ 30 - 10
static/index.html
View File 

@@ -4,22 +4,42 @@
 
         <meta charset="utf-8">
 
         <title>toot-my-t-shirt</title>
 
         <link rel="icon" type="image/png" href="/static/images/sb-favicon.png">
 
+        <link rel="stylesheet" type="text/css" href="/static/css/materialize.min.css">
 
         <link rel="stylesheet" type="text/css" href="/static/css/sb.css">
 
+        <script type="text/javascript" src="/static/js/materialize.min.js"></script>
 
         <script type="text/javascript" src="/static/js/sb.js"></script>
 
     </head>
 
     <body>
 
-        <div id="main">
 
-            <h1>toot-my-t-shirt</h1>
 
-            <div id="video-container">
 
-                <video id="sb-video" autoplay="true" muted="muted"></video>
 
+        <div id="main" class="container">
 
+            <div id="header" class="row">
 
+                <h1>toot-my-t-shirt</h1>
 
+                Share the love for your geek t-shirt!
 
             </div>
 
-            <div id="canvas-container">
 
-                <canvas id="sb-canvas"></canvas>
 
+
 
+            <div id="button-containers" class="row">
 
+                <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
 
+                    <i class="material-icons right">Take photo!</i>
 
+                </button>
 
+                <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
 
+                    <i class="material-icons right">Share photo!</i>
 
+                </button>
 
+                <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
 
+                    <i class="material-icons right">Cancel photo</i>
 
+                </button>
 
+                <button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
 
+                    <i class="material-icons right">Grant camera permissions</i>
 
+                </button>
 
+            </div>
 
+
 
+            <div class="row">
 
+                <div id="canvas-container">
 
+                    <video id="sb-video" autoplay="true" muted="muted"></video>
 
+                    <canvas id="sb-canvas"></canvas>
 
+                </div>
 
+                <div id="sb-message">
 
+                    <span id="sb-message-text">will be gone in few seconds!</span>
 
+                </div>
 
             </div>
 
-            <button id="init-btn" name="init-btn" onClick="initCamera()">Run!</button>
 
-            <button id=take-photo-btn" name="take-photo-btn" onClick="takePhoto()">Take photo!</button>
 
-            <button id=send-photo-btn" name="send-photo-btn" onClick="sendPhoto()">Share photo!</button>
 
-            <button id=cancel-photo-btn" name="cancel-photo-btn" onClick="cancelPhoto()">Cancel photo</button>
 
         </div>
 
     </body>
 
 </html>

+ 29 - 9
static/js/sb.js
View File 

@@ -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});
 
     });
 
 }