2a:null 2b:["$","title",null,{"children":"Angle Input | linard-y | Observable"}] 31:Tbaf,angleInput = (config = {}) => { const { value = 0, title, description, width = 200, offset=90, angle_color="peru", tick_color="black", label_color="black", specialtick_color='red'} = Array.isArray(config) ? {value: config} : config; let angle = value; const formEl = html``; const radius = Math.min(width, width) / 2 - 20; const arcOffset = (180-90+offset)*Math.PI / 180; const arcGen = d3.arc() .innerRadius(0) .outerRadius(radius - 3) .startAngle(arcOffset); const rotator = html`` const output = html`0°` const svg = d3.select(DOM.svg(width, width)) .attr('viewBox',`-${width / 2} -${width / 2} ${width} ${width}`); const axis = svg.append('g') .attr('transform', `scale(1, -1)`); const arc = axis.append("path") .attr("fill", angle_color); const ticks = axis.append('g') .selectAll('g') .data(d3.range(0, 360, 5)) .enter().append('g') .attr('transform', d => `rotate(${d + offset}) scale(1, -1)`) .append('line') .style("stroke", tick_color) .attr('x2', radius); axis.append('g') .attr('text-anchor', 'middle') .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll('g') .data(d3.range(0, 360, 30)) .enter().append('g') .attr('transform', d => `rotate(${d - 90 + offset}) translate(0, ${radius}) scale(1, -1)`) .append('text') .attr("dy", d => d > 180 ? 16 : -6) .attr('transform', d => `rotate(${d > 180 ? 180 : 0})`) .text(d => `${d}°`) .style('fill', label_color); axis.append('circle') .attr('r', 2) .attr('fill', tick_color); axis.append('circle') .attr('r', radius) .attr("cursor", "move") .attr('fill', 'transparent'); function update() { ticks .attr('x1', tick => tick == angle ? radius - 20 : tick % 30 ? radius - 3 : radius - 10) .style('stroke', tick => tick == angle || tick == 0 && angle > 359.5 ? specialtick_color : tick_color); arc.attr('d', arcGen.endAngle(angle * Math.PI / 180 + arcOffset)); } rotator.addEventListener('input', function() { angle = this.value; output.innerHTML = angle +'°'; output.style.marginLeft = (angle/360)*(width - 15) + (angle < 10 ? 5 : angle > 99 ? -5 : 0) + 'px'; update(); }); formEl.append(svg.node()); formEl.append(rotator); formEl.append(output); update(); const form = input({ type: "angleInput", title, description, display: v => html`

`, getValue: () => angle, form: formEl }); return form; }32:[] 2e:{"id":"c7ddcbc8e50b615c","slug":"angle-input","title":"Angle Input","thumbnail":"599cf9599c4db20f97fcf7a18cda4c97d107c622db8687f715cbc69d749b0d47","access_level":"public","create_time":"$D2021-06-24T07:51:31.279Z","update_time":"$D2021-06-29T11:25:05.102Z","view_time":null,"first_public_time":"$D2021-06-25T12:13:08.371Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":371,"publish_version":371,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Angle Input","cells":[{"id":0,"value":"md`# Angle Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`Inspired by https://observablehq.com/@toja/radial-input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"viewof alpha = angleInput({\n offset:0, \n angle_color:\"lightgray\", \n tick_color:\"tomato\", \n label_color:\"darkgreen\", \n specialtick_color:\"darkred\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"alpha","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`### Binded to a map...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"OrientedMap(alpha)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"OrientedMap = (bearing) => {\n const container = html`

`;\n \n \n let map = new mapboxgl.Map({\n container,\n center: [48.683304, 5.323284],\n zoom: 5,\n style: \"mapbox://styles/mapbox/light-v9\",\n trackResize: false,\n bearing:bearing\n });\n // add navigation controls \$zoom buttons, pitch & rotate\$\n map.addControl(new mapboxgl.NavigationControl());\n // disable map rotation using right click + drag\n map.dragRotate.disable();\n \n return container; \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.53\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZW1hbWQtai1hcm1hbmQiLCJhIjoiY2p0aTBwY3drMGt0ajQ0cGYyMWozZTUyMCJ9.VcYxgVc6cJMaYNC3w-KUyA\";\n const href = await require.resolve(\"mapbox-gl@0.53/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"import {slider, input} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"