alberanid/toot-my-t-shirt
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

nicer UI

Browse source
This commit is contained in:
Davide Alberani 2018-12-01 11:18:30 +01:00
parent 23b05c1f69
commit 90586a44d8
3 changed files with 90 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

40
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>

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