@rse/analogclock
Version:
Analog Clock for OBS Studio or vMix
120 lines (107 loc) • 5.55 kB
HTML
<!--
**
** AnalogClock ~ Analog Clock for OBS Studio or vMix
** Copyright (c) 2021-2024 Dr. Ralf S. Engelschall <rse@engelschall.com>
**
** Permission is hereby granted, free of charge, to any person obtaining
** a copy of this software and associated documentation files (the
** "Software"), to deal in the Software without restriction, including
** without limitation the rights to use, copy, modify, merge, publish,
** distribute, sublicense, and/or sell copies of the Software, and to
** permit persons to whom the Software is furnished to do so, subject to
** the following conditions:
**
** The above copyright notice and this permission notice shall be included
** in all copies or substantial portions of the Software.
**
** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
** SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
**
-->
<html>
<head>
<title>AnalogClock</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/gif" href="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw">
<link type="text/css" rel="stylesheet" href="TypoPRO-SourceSansPro.css">
<script type="text/javascript">var module = {}</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="anime.iife.min.js"></script>
<script type="text/javascript" src="svg.min.js"></script>
<script type="text/javascript" src="svg.path.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="mousetrap.min.js"></script>
<script type="text/javascript" src="howler.min.js"></script>
<script type="text/javascript" src="soundfx.browser.js"></script>
<script type="text/javascript" src="soundvm.browser.js"></script>
<script type="text/javascript" src="analogclock.js"></script>
<link type="text/css" rel="stylesheet" href="analogclock.css"/>
<script type="text/javascript">
/* render a single instance of the clock */
$(document).ready(() => {
/* initialize sound effects */
const sfx = new SoundFX({ basedir: "." })
soundfx = new Howl({ ...sfx.config(), volume: 0.50, preload: true })
/* initialize sound voice-messages */
const svm = new SoundVM({ basedir: "." })
soundvm = new Howl({ ...svm.config(), volume: 0.50, preload: true })
/* determine properties */
const props = {}
const params = (new URL(document.location)).searchParams
for (let [ key, val ] of params) {
if (typeof val === "string") {
if (val === "")
val = true
else if (val.match(/^(?:true|false)$/))
val = (val === "true")
else if (val.match(/^\d+$/))
val = parseInt(val)
else if (val.match(/^\d+\.\d+$/))
val = parseFloat(val)
}
props[key] = val
}
/* initialize and start clock */
const ac = new AnalogClock(props)
ac.start(props)
/* provide timer keystrokes for 0-99 minutes duration */
for (let d1 = 0; d1 <= 9; d1++)
for (let d2 = 0; d2 <= 9; d2++)
Mousetrap.bind(`d ${d1} ${d2}`, () => { ac.timer({ duration: d1 * 10 + d2 }) })
/* provide timer keystrokes for 0-59 minutes until-time */
for (let d1 = 0; d1 <= 5; d1++) {
for (let d2 = 0; d2 <= 9; d2++) {
const minutes = d1 * 10 + d2
const now = moment()
const until = moment().minutes(minutes).seconds(0)
if (until.isBefore(now))
until.add(1, "hours")
Mousetrap.bind(`u ${d1} ${d2}`, () => { ac.timer({ until: until.format() }) })
}
}
/* provide timer termination */
Mousetrap.bind("x", () => { ac.timer({ duration: 0 }) })
/* provide timer keystrokes for 1-9 attention flashes */
for (let i = 1; i <= 9; i++) {
Mousetrap.bind(`a ${i} s`, () => { ac.attention(i, "soft") })
Mousetrap.bind(`a ${i} h`, () => { ac.attention(i, "hard") })
}
/* provide timer hints */
Mousetrap.bind("h s", () => { ac.hint("slower") })
Mousetrap.bind("h f", () => { ac.hint("faster") })
Mousetrap.bind("h m", () => { ac.hint("message") })
})
</script>
</head>
<body>
<div class="analogclock-container">
</div>
</body>
</html>