27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Vanguard Clock</title>
|
|
<style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block}</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
<script src="vgclock.js"></script>
|
|
<script>
|
|
// OBS browser source for the overscan band: size it to the band (width = canvas width, height = band).
|
|
// It draws the server-synced strip + readable clock at the display rate. ?text=0 hides the readable clock.
|
|
(async () => {
|
|
const c = document.getElementById('c'), ctx = c.getContext('2d', { alpha: false });
|
|
const q = new URLSearchParams(location.search);
|
|
const showText = q.get('text') !== '0';
|
|
function fit() { c.width = Math.max(160, window.innerWidth); const { band } = VGClock.geometry(c.width); c.height = Math.max(band, window.innerHeight || band); }
|
|
fit(); window.addEventListener('resize', fit);
|
|
await VGClock.resync('/time');
|
|
setInterval(() => VGClock.resync('/time'), 60000);
|
|
(function frame() { VGClock.drawBand(ctx, c.width, 0, { text: showText }); requestAnimationFrame(frame); })();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|