You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.4 KiB
251 lines
8.4 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Studio</title>
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/css/cover.css"/>
|
|
</head>
|
|
<body>
|
|
<div class="site-wrapper">
|
|
<div class="site-wrapper-inner">
|
|
<div class="cover-container">
|
|
<div class="inner cover" style="height:900px;position:relative">
|
|
|
|
<div id="idBoothPanel" style="position:absolute;width:100%">
|
|
<div style="padding-top:1em">
|
|
<div id="idViewCountdown" style="font-size:20em; display:none"></div>
|
|
<div id="idViewTrigger" style="display:block">
|
|
<h1 class="cover-heading">Prends ta bobine !</h1>
|
|
<br/><br/>
|
|
<div style="width:800px;height:600px;position:relative;display:none">
|
|
<video id="player" autoplay="true" style="height:100%;width:100%;position:absolute;left:0;top:0"></video>
|
|
<div style="position:absolute;background:#3C0000;top:0;left:0;width:<%= killZone.left%>%;height:100%;opacity:0.9"></div>
|
|
<div style="position:absolute;background:#3C0000;top:0;right:0;width:<%= killZone.right%>%;height:100%;opacity:0.9"></div>
|
|
<div style="position:absolute;background:#3C0000;top:0;left:<%= killZone.left%>%;right:<%= killZone.right%>%;height:<%= killZone.top%>%;opacity:0.9"></div>
|
|
<div style="position:absolute;background:#3C0000;bottom:0;left:<%= killZone.left%>%;right:<%= killZone.right%>%;height:<%= killZone.bottom%>%;opacity:0.9"></div>
|
|
</div>
|
|
</div>
|
|
<div id="idViewGenerating" style="display:none">
|
|
<h1 class="cover-heading">Bobinogramme <i>en cours de génération...</i></h1>
|
|
<br/><br/>
|
|
<h3>Merci de bien vouloir patienter<br/>quelques secondes</h3>
|
|
<br/>
|
|
<br/>
|
|
<div style="position:relative;width:100%;height:2px;background:#444">
|
|
<div id="idProgressBar" style="background:#fff;height:2px; width:0%;transition: all 200ms ease"></div>
|
|
</div>
|
|
</div>
|
|
<div id="idViewBobinogramme" style="display:none">
|
|
<img src="" height="600px"/>
|
|
<!-- <h3 class="cover-heading">Retrouve ton <b>bobinogramme</b> sur <br/>http://<%= serverIpAddress %>:<%= serverPort %></h3> -->
|
|
</div>
|
|
</div>
|
|
<div id="idViewDoIt" style="font-size:8em; height:600px; display:none">
|
|
Faites<br/>
|
|
<span id="idViewDoIt-theme" style="font-size:2em">le chat</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="idPictPreview" style="position:absolute;display:none;width:100%">
|
|
<img src="" height="900px">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mastfoot">
|
|
<div class="inner">
|
|
<p>BW Bros.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<!-- Latest compiled and minified JQuery -->
|
|
<script src="/js/jquery-1.11.2.min.js"></script>
|
|
<!-- Latest compiled and minified javaScript bootstrap-->
|
|
<script src="/js/bootstrap.min.js"></script>
|
|
<!-- Getting the Socket.IO Client -->
|
|
<script src="/js/socket.io.js"></script>
|
|
</html>
|
|
|
|
<style type="text/css">
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var socket = io('/');
|
|
|
|
socket.on('connect', function() {
|
|
console.log("connect")
|
|
})
|
|
|
|
socket.on('boothClick', function(pData) {
|
|
BOB_runBooth();
|
|
});
|
|
|
|
var BOB_var_context = {
|
|
boothOnGoing : false,
|
|
initTimer : 3,
|
|
onGoingTimer : 0,
|
|
boothId : null,
|
|
nbError : 0,
|
|
pictureId : 0
|
|
}
|
|
|
|
var BOB_var_themes = {
|
|
selectedId : 0,
|
|
list : [
|
|
"le chat",
|
|
"le cuir moustache",
|
|
"le roi",
|
|
"le bouffon",
|
|
"le moussailon",
|
|
"le geek",
|
|
"l'amoureux",
|
|
]
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$(document).keypress(function (e) {
|
|
if (e.which === 32) BOB_runBooth()
|
|
})
|
|
})
|
|
|
|
function BOB_runBooth() {
|
|
if( BOB_var_context.boothOnGoing === false ) {
|
|
var currentDate = new Date();
|
|
BOB_var_context.boothOnGoing = true;
|
|
BOB_var_context.boothId = currentDate.getTime();
|
|
BOB_var_context.pictureId = 0;
|
|
BOB_var_context.onGoingTimer = BOB_var_context.initTimer;
|
|
|
|
$('#idViewTrigger').fadeOut(500, function() {
|
|
BOB_countdown();
|
|
});
|
|
}
|
|
}
|
|
|
|
function BOB_countdown() {
|
|
$('#idViewCountdown').fadeIn();
|
|
$('#idViewCountdown').css('fontSize', '20em')
|
|
$('#idViewCountdown').html(BOB_var_context.onGoingTimer);
|
|
//
|
|
if( BOB_var_context.onGoingTimer > 5 ) {
|
|
// $('#idViewDoIt').show();
|
|
// $('#idViewDoIt-theme').hide();
|
|
} else if( BOB_var_context.onGoingTimer > 2 ) {
|
|
// $('#idViewDoIt-theme').html( BOB_var_themes.list[BOB_var_themes.selectedId] );
|
|
// $('#idViewDoIt-theme').show();
|
|
}
|
|
|
|
if( BOB_var_context.onGoingTimer > 0 ) {
|
|
setTimeout(function() {
|
|
BOB_var_context.onGoingTimer -= 1;
|
|
BOB_countdown();
|
|
}, 1000)
|
|
} else {
|
|
$('#idViewCountdown').html("Souriez");
|
|
$('#idViewCountdown').css('fontSize', '14em')
|
|
BOB_takeThe1Pictures();
|
|
}
|
|
}
|
|
|
|
function BOB_displayPictPreview(pBoothId, pPictureId, pCallback) {
|
|
$('#idViewCountdown').html("");
|
|
$('#idPictPreview > img').attr('src', '/img/prebuilt/'+pBoothId+'/pict_'+pPictureId+'.jpg');
|
|
$('#idBoothPanel').fadeOut(50, function() {
|
|
$('#idPictPreview').show();
|
|
setTimeout(function() {
|
|
$('#idPictPreview').hide();
|
|
$('#idBoothPanel').fadeIn(50, function() {
|
|
pCallback()
|
|
})
|
|
}, 4000)
|
|
})
|
|
}
|
|
|
|
var BOB_var_progressTimer = new Date();
|
|
|
|
function BOB_lauchFakeProgressBar() {
|
|
setTimeout(function() {
|
|
var progress = (new Date() - BOB_var_progressTimer) / <%= renderingTime %> * 100;
|
|
$('#idProgressBar').css('width', progress+'%');
|
|
if( progress < 100 ) {
|
|
BOB_lauchFakeProgressBar();
|
|
}
|
|
}, 500)
|
|
}
|
|
|
|
function BOB_showError () {
|
|
BOB_var_context.nbError += 1
|
|
$('#idViewCountdown').fadeIn()
|
|
$('#idViewCountdown').css('fontSize', '3em')
|
|
if (BOB_var_context.nbError >= 3) {
|
|
BOB_var_context.nbError = 0
|
|
$('#idViewCountdown').html("Oulala, le bobinoscope se sent pas<br/>très bien<br/>Revenez plus tard !")
|
|
setTimeout(function () {
|
|
$('#idViewCountdown').fadeOut(500, function() {
|
|
$('#idViewTrigger').fadeIn();
|
|
})
|
|
}, 5000)
|
|
} else {
|
|
$('#idViewCountdown').html("Oops ! Un problème de pellicule ...<br/>On recommence")
|
|
BOB_var_context.onGoingTimer = BOB_var_context.initTimer
|
|
setTimeout(BOB_countdown, 4000)
|
|
}
|
|
}
|
|
|
|
function BOB_takeThe1Pictures() {
|
|
$.get('/booth/dslr/takepicture/'+BOB_var_context.boothId+'/'+BOB_var_context.pictureId, function(pResponse) {
|
|
if( pResponse.error ) {
|
|
// if( confirm(pResponse.error) ) {
|
|
// BOB_var_context.boothOnGoing = false;
|
|
// $('#idViewCountdown').fadeOut(500, function() {
|
|
// $('#idViewTrigger').fadeIn();
|
|
// });
|
|
// return;
|
|
// }
|
|
BOB_showError()
|
|
return
|
|
}
|
|
|
|
BOB_var_context.pictureId += 1
|
|
BOB_var_context.nbError = 0
|
|
|
|
if( BOB_var_context.pictureId < 4 ) {
|
|
BOB_var_context.onGoingTimer = BOB_var_context.initTimer
|
|
BOB_countdown();
|
|
} else {
|
|
$('#idViewCountdown').fadeOut(500, function() {
|
|
BOB_var_progressTimer = new Date();
|
|
$('#idProgressBar').css('width', '0');
|
|
$('#idViewGenerating').fadeIn();
|
|
BOB_lauchFakeProgressBar()
|
|
})
|
|
$.get('/booth/build/'+BOB_var_context.boothId, function(pResponse) {
|
|
$('#idViewBobinogramme > img').attr('src', '/booth/build/result/low/'+pResponse.boothId+'.jpg');
|
|
$('#idViewGenerating').fadeOut(500, function() {
|
|
$('#idViewBobinogramme').fadeIn(500, function() {
|
|
setTimeout(function(){
|
|
BOB_var_context.boothOnGoing = false;
|
|
$('#idViewBobinogramme').fadeOut(500, function() {
|
|
$('#idViewTrigger').fadeIn();
|
|
});
|
|
}, 10000)
|
|
})
|
|
})
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|