Current section
Files
Jump to
Current section
Files
priv/lib-src/cotonic/examples/worker_clock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Clock</title>
<style>
#root {
margin:auto;
max-width:600px;
width:100%;
}
</style>
</head>
<body>
<div id="root">
<h1>Clock Worker Example</h1>
<p>
In this example the hands of the clock are managed by a single web-worker.
</p>
<button data-onclick-topic="spawn">Spawn Worker</button>
<button data-onclick-topic="stop">Stop Worker</button>
<!-- The svg can be placed as is. -->
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(150,150)">
<g>
<circle fill="none" r="108" stroke="gray" stroke-width="4"></circle>
<circle fill="none" r="97" stroke="black" stroke-dasharray="4, 46.789082" stroke-width="11" transform="rotate(-1.5)"></circle>
<circle fill="none" r="100" stroke="black" stroke-dasharray="2, 8.471976" stroke-width="5" transform="rotate(-.873)"></circle>
</g>
<g id="hands" transform="rotate(180)">
<g id="hour"></g>
<g id="minute"></g>
<g id="second"></g>
</g>
</g>
</svg>
</div>
<script type="text/javascript" src="/cotonic.js"
data-base-worker-src="/cotonic-worker.js"></script>
<script>
function main() {
let hands_worker = null;
cotonic.broker.subscribe("spawn",
function() {
if(!hands_worker) {
hands_worker = cotonic.spawn("/examples/clock_worker.js");
}
})
cotonic.broker.subscribe("stop", function() {
if(hands_worker) {
cotonic.exit(hands_worker);
hands_worker = null;
}
})
}
if(window.cotonic) {
main();
} else {
window.addEventListener("cotonic-ready", main)
}
</script>
</body>
</html>