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; margin: 0 auto;
} }
#video-info-container {
padding-top: 0.2em;
}
#izi-container {
height: 4em;
width: 100%;
}
#header { #header {
margin-left: 15px; margin-left: 15px;
} }

59
static/index.html
View file

@ -13,31 +13,44 @@
<script type="text/javascript" src="/static/js/sb.js"></script> <script type="text/javascript" src="/static/js/sb.js"></script>
</head> </head>
<body> <body>
<div id="main" class="container"> <div id="main">
<div id="header" class="row center-align"> <div class="row">
<h1>toot-my-t-shirt</h1> <div class="col s3">
Share the love for your geek t-shirt. <div id="header" class="row center-align">
</div> <h1>toot-my-t-shirt</h1>
Share the love for your geek t-shirt.
</div>
<div id="button-containers" class="row center-align"> <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()"> <p>
<i class="material-icons left">camera</i>Take photo <small>(1 sec delay)</small> <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
</button> <i class="material-icons left">camera</i>Take photo
<button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()"> </button>
<i class="material-icons left">share</i>Share photo </p>
</button> <p>
<button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()"> <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
<i class="material-icons left">cancel</i>Cancel photo <i class="material-icons left">share</i>Share photo
</button> </button>
<button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()"> </p>
<i class="material-icons left">photo_camera</i>Grant camera permissions <p>
</button> <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
</div> <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="video-info-container" class="col center-align">
<div id="canvas-container"> <div id="izi-container"></div>
<video id="sb-video" autoplay muted></video> <div id="canvas-container">
<canvas id="sb-canvas"></canvas> <video id="sb-video" autoplay muted></video>
<canvas id="sb-canvas"></canvas>
</div>
</div> </div>
</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 = { var Countdown = {
_timeout: null, _timeout: null,
@ -118,12 +118,14 @@ function sendData(data) {
console.log(msg); console.log(msg);
iziToast.error({ iziToast.error({
"title": "😭 something wrong sending the data 😭", "title": "😭 something wrong sending the data 😭",
"target": "#izi-container",
"message": msg, "message": msg,
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
} }
@ -138,11 +140,13 @@ function sendData(data) {
iziToast.destroy(); iziToast.destroy();
iziToast.success({ iziToast.success({
"title": msg, "title": msg,
"target": "#izi-container",
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
} else { } else {
@ -150,12 +154,14 @@ function sendData(data) {
console.log(msg); console.log(msg);
iziToast.error({ iziToast.error({
"title": "😭 backend error 😭", "title": "😭 backend error 😭",
"target": "#izi-container",
"message": msg, "message": msg,
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
} }
@ -163,12 +169,14 @@ function sendData(data) {
console.log(msg); console.log(msg);
iziToast.error({ iziToast.error({
"title": "😭 error connecting to the server 😭", "title": "😭 error connecting to the server 😭",
"target": "#izi-container",
"message": err, "message": err,
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
cancelPhoto(); cancelPhoto();
@ -184,6 +192,7 @@ function cancelPhoto() {
var context = canvas.getContext("2d"); var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
Countdown.stop(); Countdown.stop();
iziToast.destroy();
} }
@ -204,11 +213,13 @@ function sendPhoto() {
console.log(msg); console.log(msg);
iziToast.warning({ iziToast.warning({
"title": msg, "title": msg,
"target": "#izi-container",
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
return; return;
@ -225,12 +236,14 @@ function _takePhoto(message) {
console.log(msg); console.log(msg);
iziToast.warning({ iziToast.warning({
"title": msg, "title": msg,
"target": "#izi-container",
"message": "please grant camera permissions", "message": "please grant camera permissions",
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
return; return;
@ -260,16 +273,19 @@ function _takePhoto(message) {
document.querySelector("#send-photo-btn").classList.remove("disabled"); document.querySelector("#send-photo-btn").classList.remove("disabled");
document.querySelector("#cancel-photo-btn").classList.remove("disabled"); document.querySelector("#cancel-photo-btn").classList.remove("disabled");
iziToast.question({ 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!", "message": message || "press \"share photo\" to publish!",
"titleSize": "3em", "titleSize": "3em",
"messageSize": "2em", "messageSize": "2em",
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
Countdown.start(5, cancelPhoto); Countdown.start(DEFAULT_DELAY, cancelPhoto);
} }
@ -304,6 +320,7 @@ function initCamera() {
"close": false, "close": false,
"drag": false, "drag": false,
"pauseOnHover": false, "pauseOnHover": false,
"progressBarColor": "red",
"position": "topCenter" "position": "topCenter"
}); });
}); });