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

multiple columns

Browse source
This commit is contained in:
Davide Alberani 2019-12-22 10:46:03 +01:00
parent 3d99780464
commit 03b882cd1d
3 changed files with 65 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/css/sb.css
View file

@ -7,6 +7,15 @@
margin: 0 auto;
}
#video-info-container {
padding-top: 0.2em;
}
#izi-container {
height: 4em;
width: 100%;
}
#header {
margin-left: 15px;
}

59
static/index.html
View file

@ -13,31 +13,44 @@
<script type="text/javascript" src="/static/js/sb.js"></script>
</head>
<body>
<div id="main" class="container">
<div id="header" class="row center-align">
<h1>toot-my-t-shirt</h1>
Share the love for your geek t-shirt.
</div>
<div id="main">
<div class="row">
<div class="col s3">
<div id="header" class="row center-align">
<h1>toot-my-t-shirt</h1>
Share the love for your geek t-shirt.
</div>
<div id="button-containers" class="row center-align">
<button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
<i class="material-icons left">camera</i>Take photo <small>(1 sec delay)</small>
</button>
<button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
<i class="material-icons left">share</i>Share photo
</button>
<button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
<i class="material-icons left">cancel</i>Cancel photo
</button>
<button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
<i class="material-icons left">photo_camera</i>Grant camera permissions
</button>
</div>
<div id="button-containers" class="row center-align">
<p>
<button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
<i class="material-icons left">camera</i>Take photo
</button>
</p>
<p>
<button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
<i class="material-icons left">share</i>Share photo
</button>
</p>
<p>
<button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
<i class="material-icons left">cancel</i>Cancel photo
</button>
</p>
<p>
<button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
<i class="material-icons left">photo_camera</i>Grant camera permissions
</button>
</p>
</div>
</div>
<div class="row center-align">
<div id="canvas-container">
<video id="sb-video" autoplay muted></video>
<canvas id="sb-canvas"></canvas>
<div id="video-info-container" class="col center-align">
<div id="izi-container"></div>
<div id="canvas-container">
<video id="sb-video" autoplay muted></video>
<canvas id="sb-canvas"></canvas>
</div>
</div>
</div>
</div>

23
static/js/sb.js
View file

@ -1,4 +1,4 @@
var DEFAULT_DELAY = 7;
var DEFAULT_DELAY = 20;
var Countdown = {
_timeout: null,
@ -118,12 +118,14 @@ function sendData(data) {
console.log(msg);
iziToast.error({
"title": "😭 something wrong sending the data 😭",
"target": "#izi-container",
"message": msg,
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
}
@ -138,11 +140,13 @@ function sendData(data) {
iziToast.destroy();
iziToast.success({
"title": msg,
"target": "#izi-container",
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
} else {
@ -150,12 +154,14 @@ function sendData(data) {
console.log(msg);
iziToast.error({
"title": "😭 backend error 😭",
"target": "#izi-container",
"message": msg,
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
}
@ -163,12 +169,14 @@ function sendData(data) {
console.log(msg);
iziToast.error({
"title": "😭 error connecting to the server 😭",
"target": "#izi-container",
"message": err,
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
cancelPhoto();
@ -184,6 +192,7 @@ function cancelPhoto() {
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
Countdown.stop();
iziToast.destroy();
}
@ -204,11 +213,13 @@ function sendPhoto() {
console.log(msg);
iziToast.warning({
"title": msg,
"target": "#izi-container",
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
return;
@ -225,12 +236,14 @@ function _takePhoto(message) {
console.log(msg);
iziToast.warning({
"title": msg,
"target": "#izi-container",
"message": "please grant camera permissions",
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
return;
@ -260,16 +273,19 @@ function _takePhoto(message) {
document.querySelector("#send-photo-btn").classList.remove("disabled");
document.querySelector("#cancel-photo-btn").classList.remove("disabled");
iziToast.question({
"title": "do you like what you see?",
"title": "do you like it?",
"timeout": DEFAULT_DELAY * 1000,
"target": "#izi-container",
"message": message || "press \"share photo\" to publish!",
"titleSize": "3em",
"messageSize": "2em",
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
Countdown.start(5, cancelPhoto);
Countdown.start(DEFAULT_DELAY, cancelPhoto);
}
@ -304,6 +320,7 @@ function initCamera() {
"close": false,
"drag": false,
"pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter"
});
});