summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html56
1 files changed, 56 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c33ded8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Wadsworth/Wheatstone</title>
+<style>
+.pointer {
+ transform: none;
+ transform-origin: 50% 50%;
+}
+.pointer path, .pointer circle {
+ stroke: black;
+ stroke-width: 1px;
+}
+.pointer circle {
+ fill: transparent;
+}
+</style>
+<script>
+let dragging = null;
+let svg = null;
+function start(element) { dragging = element; }
+function stop() { dragging = null; }
+function update(element, angle) {
+ element.dataset.angle = angle;
+ element.style.transform = `rotate(${Math.floor(angle)}deg)`;
+}
+function onmove(event) {
+ if (dragging) {
+ const rect = svg.getBoundingClientRect();
+ const x = event.clientX - (rect.left + rect.width / 2);
+ const y = event.clientY - (rect.top + rect.height / 2);
+ let theta = Math.atan2(y, x);
+ theta = theta > 0 ? theta : theta + Math.PI * 2;
+ let angle = theta * 180.0 / Math.PI;
+ const current = Number(dragging.dataset.angle);
+ const diff = (angle - current) % 360.0;
+ update(dragging, current + diff);
+ svg.querySelectorAll(".pointer").forEach((x) => {
+ if (x != dragging) {
+ const ratio = Number(dragging.dataset.ratio) / Number(x.dataset.ratio);
+ update(x, Number(x.dataset.angle) + diff * ratio);
+ }
+ });
+ }
+}
+</script>
+<svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
+<g data-angle="0" data-ratio="4" class="pointer">
+ <path d="M49 50 L80 50 Z"/>
+ <circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
+</g>
+<g data-angle="0" data-ratio="-1" class="pointer">
+ <path d="M49 50 L70 50 Z"/>
+ <circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
+</g>
+</svg>