spectrum learns to dig

Knob, 흔히들 Dial 이라고 말하는 전통적인 인터페이스가 있다. 돌리고~돌리~고~ ( 출처 ) webAudio를 하다보니 (  http://jsbin.com/hacota ,  http://output.jsbin.com/tidoqi  등등) 직관적인 UI 컨트롤러가 필요해서 잠깐 찾다가 이럴게 아니라 최소한의 요소만 뽑아내서 만들어보기로 함. 목표는 PC/Android/iOS 모두 잘 작동하도록 하는 것. 구현할 기능을 생각해보면 현재 값을 시각화하는 요소가 있을 것 - 위 사진에서처럼 음각으로 만든 홈. 경계값이 있을 것 - 12시 방향 기준으로 -140도~140도까지 클릭 후 드래그 시만 움직이고 즉각적으로 반응 정도로 잡고 일단 SVG로 원을 두개 그려본다.       <circle cx="6em" cy="6em" r="5em"/>       <circle class="handle" cx="6em" cy="3em" r="0.6em"/> 단위는 서로 다른 디바이스에서도 잘 보이도록 em을 써서 만든다. 1em은 글자 한글자 높이정도의 단위인데 해상도에 대한 걱정을 덜어줘서 참 편하다. em은 이정도, 즉 1em=1글자 높이 이걸 돌려주기만 하면 된다. 돌리는 건 뭘로? css transform / rotate 를 사용한다. 두 개의 원을 그룹으로 묶어서 돌리자.     <g class="jog" style="-webkit-transform: rotate3d(0,0,1,{{knob}}deg); transform: rotate3d(0,0,1,{{knob}}deg)">       <circle cx="6em" cy="6em" r="5em&q