Wolfram Technology Guide: Symbolic Interface Construction  previous | next 
Experiment with New Forms of Controls
Mathematica provides an unprecedentedly flexible interface experimentation system, allowing not only traditional controls, but arbitrary graphics, layout, and actions, as well as connection to arbitrary human interface devices.
In[1]:=

Click for copyable input
CircularWinder[Dynamic[\[Theta]_]] := 

 DynamicModule[{}, 

  Deploy[EventHandler[

    Graphics[{GrayLevel[0.97], Disk[{0, 0}, 1], GrayLevel[0.5], 

      Circle[{0, 0}, 1], GrayLevel[0.8], Circle[{0, 0}, 0.98], Black, 

      Disk[{0, 0}, 0.01], Arrowheads[0.1], 

      Arrow[{{0, 0}, Dynamic[{Cos[\[Theta]], Sin[\[Theta]]}]}], 

      Darker[Cyan, 0.5], 

      Dynamic[First[

        ParametricPlot[

         Evaluate[((Sign[\[Theta]] t)/50)*{Cos[t], Sin[t]}], {t, 

          0, \[Theta] + 0.001}]]]}, ImageSize -> 200, 

     PlotRange -> 1.1], 

    "MouseDragged" :> 

     Module[{\[Alpha], dir, 

       r = MousePosition["Graphics"], \[Beta] = 

        ArcTan[Cos[\[Theta]], Sin[\[Theta]]] + 

         If[Sin[\[Theta]] < 0, 2 \[Pi], 0]}, 

      If[r == {0, 0}, r = {1, 0}];

            

      If[! VectorQ[r, NumericQ], r = {Cos[\[Theta]], Sin[\[Theta]]}];

            \[Alpha] = ArcTan @@ r + If[r[[2]] < 0, 2 \[Pi], 0];

            dir = Mod[\[Alpha] - \[Beta], 2 \[Pi]];

            \[Theta] += 

       If[dir < 5, dir, -Mod[-\[Alpha] + \[Beta], 2 \[Pi]]];]]], 

  Initialization :> If[! NumericQ[\[Theta]], \[Theta] = 0]]
In[2]:=

Click for copyable input
DynamicModule[{a = 0, b = 0}, 

 Column[{{CircularWinder[Dynamic[a]], CircularWinder[Dynamic[b]]}, 

   Framed[Dynamic[{a, b, a - b, a + b}], Background -> LightYellow]}, 

  Center]]
Out[2]=