diff options
| -rw-r--r-- | index.html | 49 |
1 files changed, 42 insertions, 7 deletions
@@ -7,13 +7,15 @@ svg { display: block; margin: 1em auto; border: 1px solid black; - height: 32em; - max-height: 80vh; } -.pointer { +.pointer, .plate { transform: none; transform-origin: 50% 50%; } +.pointer .plate path { + stroke: none; + stroke-width: none; +} .pointer path, .pointer circle { stroke: black; stroke-width: 1px; @@ -29,7 +31,7 @@ function start(element) { dragging = element; } function stop() { dragging = null; } function update(element, diff) { element.dataset.angle = Number(element.dataset.angle) + diff; - element.style.transform = `rotate(${Math.floor(element.dataset.angle)}deg)`; + element.style.transform = `rotate(${element.dataset.angle}deg)`; } function reset() { if (svg) { @@ -60,8 +62,40 @@ function onmove(event) { function change(query, ratio) { svg.querySelector(query).dataset.ratio = ratio; } +function newSegment(radius, n) { + let g = document.createElementNS("http://www.w3.org/2000/svg", "g"); + let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + const outerRadius = radius + 10; + const left = width(radius); + const right = width(outerRadius); + path.setAttribute("d", `M${left} ${-height(radius)} + A${radius} ${radius} 0 0 1 ${left} ${height(radius)} + L${right} ${height(outerRadius)} + A${outerRadius} ${outerRadius} 0 0 0 ${right} ${-height(outerRadius)} + Z`); + g.classList.add("plate"); + g.appendChild(path); + return g; + + function width(radius) { return Math.cos(Math.PI / n) * radius; } + function height(radius) { return Math.sin(Math.PI / n) * radius; } +} +function generatePlate(svg, radius, segments) { + const colours = ["#edd", "#ded", "#dde"]; + for (let i=0; i < segments; i++) { + let segment = newSegment(radius, segments); + segment.style.transform = `rotate(${i * 360 / segments}deg) translate(50%, 50%)`; + segment.style.fill = colours[i%3]; + svg.prepend(segment); + } +} +function init(element) { + svg = element; + generatePlate(svg, 20, 26); + generatePlate(svg, 30, 27); +} </script> -<svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100"> +<svg onload="init(this)" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100"> <g id="outer" data-angle="0" data-ratio="27" class="pointer"> <path d="M49 50 L80 50 Z"/> <circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/> @@ -71,6 +105,7 @@ function change(query, ratio) { <circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/> </g> </svg> -<input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off"> -<input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off"> +<strong>Wadsworth/Wheatstone</strong><br> +Outer: <input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off"><br> +Inner: <input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off"><br> <button onclick="reset()">Reset Position</button> |