|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
|
crossorigin="anonymous">
|
|
|
|
<title>Slides for the ongoing talk</title>
|
|
</head>
|
|
<body>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
|
crossorigin="anonymous"></script>
|
|
<script>
|
|
// We store the timestamp and the file names of the current slides in the
|
|
// global variable data.
|
|
window.data = 0;
|
|
|
|
function refresh_page() {
|
|
$('#refresh_button').css('display', 'none');
|
|
if ($('#autorefresh').is(":checked")) {
|
|
// console.log('spinner');
|
|
$('#spinner').fadeIn();
|
|
window.setTimeout(() => $('#spinner').fadeOut(), 1000);
|
|
}
|
|
|
|
// console.log('refresh', data);
|
|
$('#title').html(data[1])
|
|
|
|
let ctr = 0;
|
|
let img_length = $('img.slide').length;
|
|
|
|
while (ctr < data.length - 2) {
|
|
if (ctr < img_length) {
|
|
$('#slide-' + ctr).attr('src', data[ctr+2]);
|
|
// console.log('replace', ctr, data[ctr+2]);
|
|
} else {
|
|
$('#slidesdiv').append(`<img id="slide-${ctr}" class="slide" src="${data[ctr+2]}" style="width: 100%; padding: 10px; border: 1px solid gray; margin: 10px;">`)
|
|
// console.log('add', ctr, data[ctr+2]);
|
|
}
|
|
ctr++;
|
|
}
|
|
while (ctr < img_length) {
|
|
$('#slide-' + ctr).remove();
|
|
ctr++;
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$.ajaxSetup({ cache: false });
|
|
|
|
$("#autorefresh").change(function() {
|
|
if(this.checked){
|
|
refresh_page();
|
|
}
|
|
});
|
|
|
|
// init page
|
|
$.getJSON('timestamp.json', function(d) {
|
|
// console.log('get data 1', d);
|
|
data = d;
|
|
refresh_page();
|
|
});
|
|
|
|
window.setInterval(
|
|
function() {
|
|
$.getJSON('timestamp.json', function(d) {
|
|
// console.log('get data 2', d);
|
|
if (data === undefined || data[0] != d[0]) {
|
|
// update available
|
|
// console.log("OLD", data);
|
|
data = d;
|
|
// console.log("NEW", data);
|
|
if ($('#autorefresh').is(":checked")) {
|
|
// console.log('auto-refreshing');
|
|
refresh_page();
|
|
} else {
|
|
$('#refresh_button').css('display', 'block');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
10000 // retrieve timestamp.json every 10 seconds
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<div id="refresh_button" style="position: fixed; top: 80px; right: 100px; display: none;">
|
|
<button onclick="refresh_page()" class="btn btn-primary float-right">Refresh page</button>
|
|
</div>
|
|
<div style="position: fixed; top: 40px; right: 100px; display: none;" id="spinner">
|
|
<button class="btn btn-success btn-sm">Updating page</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row mt-5">
|
|
<div class="col-9 order-1 oder-md-2">
|
|
<h1 id="title">Slides for the ongoing talk</h1>
|
|
</div>
|
|
<div class="col-3 order-2 order-md-1">
|
|
<div class="float-end"><input type="checkbox" checked id="autorefresh">
|
|
Auto-refresh?
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col" id="slidesdiv">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|