diff options
| -rw-r--r-- | index.html | 56 |
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> |