@rse/analogclock
Version:
Analog Clock for OBS Studio or vMix
117 lines (103 loc) • 5.59 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-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro.css">
<script type="text/javascript">var module = {}</script>
<script type="text/javascript" src="@jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="@animejs/lib/anime.iife.min.js"></script>
<script type="text/javascript" src="@@svgdotjs/svg.js/dist/svg.min.js"></script>
<script type="text/javascript" src="@svg.path.js/svg.path.js"></script>
<script type="text/javascript" src="@moment/min/moment.min.js"></script>
<script type="text/javascript" src="@mousetrap/mousetrap.min.js"></script>
<script type="text/javascript" src="@howler/dist/howler.min.js"></script>
<script type="text/javascript" src="@@rse/soundfx/soundfx.browser.js"></script>
<script type="text/javascript" src="@@rse/soundvm/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" src="huds"></script>
<script type="text/javascript">
$(document).ready(() => {
/* initialize sound effects */
const sfx = new SoundFX({ basedir: "@@rse/soundfx" })
soundfx = new Howl({ ...sfx.config(), volume: 0.50, preload: true })
/* initialize sound voice-messages */
const svm = new SoundVM({ basedir: "node_modules/@rse/soundvm" })
soundvm = new Howl({ ...svm.config(), volume: 0.50, preload: true })
/* initialize backend communication */
const huds = new HUDS()
huds.on("open", () => { console.log("HUDS: WebSocket: open") })
huds.on("close", () => { console.log("HUDS: WebSocket: close") })
huds.on("error", (error) => { console.log("HUDS: WebSocket: error", error) })
huds.connect()
/* determine options */
const options = { ...huds.config().analogclock, ...huds.options }
/* initialize and start clock */
const ac = new AnalogClock(options)
ac.start(options)
/* provide timer events for 0-99 minutes duration */
huds.bind("duration.*", (event, data) => {
const m = event.match(/^duration\.(\d+)$/)
ac.timer({ duration: parseInt(m[1]) })
})
/* provide timer events for 0-59 minutes until-time */
huds.bind("until.*", (event, data) => {
const m = event.match(/^until\.(\d+)$/)
const minutes = parseInt(m[1])
const now = moment()
const until = moment().minutes(minutes).seconds(0)
if (until.isBefore(now))
until.add(1, "hours")
ac.timer({ until: until.format() })
})
/* provide timer termination */
huds.bind("terminate", (event, data) => {
ac.timer({ duration: 0 })
})
/* provide timer events for 1-9 attention flashes */
huds.bind("attention.*", (event, data) => {
const m = event.match(/^attention\.(\d+)\.(soft|hard)$/)
const flashes = parseInt(m[1])
const type = m[2]
ac.attention(flashes, type)
})
/* provide timer hints */
huds.bind("hint.slower", () => { ac.hint("slower") })
huds.bind("hint.faster", () => { ac.hint("faster") })
huds.bind("hint.message", () => { ac.hint("message") })
})
</script>
</head>
<body>
<div class="analogclock-container">
</div>
</body>
</html>